Datatables 使用中遇到的问题及解决办法
使用版本:1.9.4
官网例子:http://legacy.datatables.net/examples/
官网插件:http://legacy.datatables.net/
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.