Datatables 使用中遇到的问题及解决办法

最新推荐文章于 2024-09-07 09:17:16 发布

Wilson伟庭

最新推荐文章于 2024-09-07 09:17:16 发布

阅读量4.3k

点赞数 1

分类专栏： JS 文章标签： Datatables jquery

本文链接：https://blog.csdn.net/neso520/article/details/80648163

版权

JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用版本：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获取一行的数据  
        }
    }
};