使用版本:1.9.4javascript
官网例子:http://legacy.datatables.net/examples/html
官网插件:http://legacy.datatables.net/java
1.清空表格ajax
原有方法fnClearTable在清空的时候会经过ajax调用一次后台,并且也清不掉数据。json
清空表格能够用下面这个方法代替原有方法app
$("#table tbody").html("");
2.表格刷新post
原有方法并无论用,能够在datatables的js文件里加入这段代码。在$.extend的代码后面this
// 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); }); }
动态刷新使用例子url
$("#table").dataTable().sAjaxSource="url"; $("#table").dataTable().fnReloadAjax($("#table").dataTable());
3.表格可拖动调整列宽spa
(先记下后面再写)
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.