1. 程式人生 > >Datatables 使用中遇到的問題及解決辦法

Datatables 使用中遇到的問題及解決辦法

使用版本:1.9.4

1.清空表格

原有方法fnClearTable在清空的時候會通過ajax呼叫一次後臺,而且也清不掉資料。

清空表格可以用下面這個方法代替原有方法

$("#table tbody").html("");

2.表格重新整理

原有方法並不管用,可以在datatables的js檔案里加入這段程式碼。在$.extend的程式碼後面

        // jQuery aliases
	$.fn.DataTable = DataTable;
	$.fn.dataTable = DataTable;
	$.fn.dataTableSettings = DataTable.settings;
	$.fn.dataTableExt = DataTable.ext;

        /*
        add this plug in
        // you can call the below function to reload the table with current state
        Datatables重新整理方法
        oTable.fnReloadAjax(oTable.fnSettings());
        */
	$.fn.dataTableExt.oApi.fnReloadAjax = function (oSettings) {
	    //oSettings.sAjaxSource = "warehouse.ashx?action=get";
	    this.fnClearTable(this);
	    this.oApi._fnProcessingDisplay(oSettings, true);
	    var that = this;

	    $.getJSON(oSettings.sAjaxSource, null, function (json) {
	        /* Got the data - add it to the table */
	        for (var i = 0; i < json.aaData.length; i++) {
	            that.oApi._fnAddData(oSettings, json.aaData[i]);
	        }
	        oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
	        that.fnDraw(that);
	        that.oApi._fnProcessingDisplay(oSettings, false);
	    });
	}

動態重新整理使用例子

$("#table").dataTable().sAjaxSource="url";

$("#table").dataTable().fnReloadAjax($("#table").dataTable());

3.表格可拖動調整列寬

(先記下後面再寫)

4.表格雙擊開啟彈框

(先記下後面再寫)

5.DataTables行返回值 滑鼠懸停顯示提示

效果:

var table = $('#table').dataTable({ 
        "fnRowCallback": function (nRow, aData, iDisplayIndex) {
            return DataTablesRowCallBack(nRow);
        }
    });

function DataTablesRowCallBack(nRow) {
    for (var i = 0; i < nRow.cells.length; i++) {
        var value = nRow.cells[i].innerHTML;
        if (value != null && value.length > 2 && value.indexOf("<button") < 0 && value.indexOf("<input") < 0 && value.indexOf("<span") < 0) {
            nRow.cells[i].outerHTML = '<td style="overflow: hidden;text-overflow: ellipsis;" title="' + value + '">' + value + '</td>';
        }
    }
    return nRow;
}

6.DataTables匯出Excel

//匯出Excel通用方法
//url: 後代獲取地址
//table:datatales表格物件
//isExportFirstColumn:是否匯出第一列
//isExportVisible:是否匯出隱藏列
function ExportExcel(url, table, isExportFirstColumn, isExportVisible) {
    var params = "";
    var columns = table.fnSettings().aoColumns;
    for (var i = 0; i < columns.length; i++) {
        if (isExportVisible || columns[i].bVisible)
            if (isExportFirstColumn || i != 0)
                params = params + columns[i].sTitle + ":" + columns[i].mData + ",";
    }
    params = params.substring(0, params.length - 1);

    $('<form method="post" action="' + url + '&columns=' + params + '"></form>').appendTo('body').submit().remove();
}
        string i = context.Request.Params["columns"].ToString();//匯出列名
        ExcelHelper.ExportDTtoExcel(db.getData(),i,"檔名");


        /// <summary>
        /// DataTable匯出到Excel檔案
        /// </summary>
        /// <param name="dtSource">源DataTable</param>
        /// <param name="strHeaderText">表頭文字</param>
        /// <param name="strFileName">檔名</param>
        public static void ExportDTtoExcel(DataTable dtSource, string strHeaderText, string strFileName)
        {
            strFileName = strFileName + "_" + DateTime.Now.ToString("yyyyMMddHHmmss") + ".xls";
            string strFolder = AppDomain.CurrentDomain.BaseDirectory + "\\Temp\\";
            string strPath = strFolder + strFileName;
            if (!Directory.Exists(strFolder))//如果不存在就建立file資料夾
            {
                Directory.CreateDirectory(strFolder);
            }
            using (MemoryStream ms = ExportDT(dtSource, strHeaderText))
            {
                using (FileStream fs = new FileStream(strPath, FileMode.Create, FileAccess.Write))
                {
                    byte[] data = ms.ToArray();
                    fs.Write(data, 0, data.Length);
                    fs.Flush();
                }
            }
            DownloadExcel(strPath, strFileName);
            if (File.Exists(strPath))
            {
                File.Delete(strPath);
            }
        }


7.獲取選中行資料

/**
 *DataTables獲取選中行資料
 **/
var SelectValue = function (tb) {
    var nTrs = tb.fnGetNodes();//fnGetNodes獲取表格所有行,nTrs[i]表示第i行tr物件  
    for (var i = 0; i < nTrs.length; i++) {
        if ($(nTrs[i]).hasClass('row_selected')) {
            return tb.fnGetData(nTrs[i]);//fnGetData獲取一行的資料  
        }
    }
};

8.