Datatables 使用中遇到的問題及解決辦法
阿新 • • 發佈:2019-02-01
使用版本: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.