• 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.

  • 相关阅读:
    你所能用到的数据结构(一)
    你所能用到的数据结构(八)
    你所能用到的数据结构(六)
    你所能用到的数据结构(三)
    你所能用到的数据结构(四)
    你所能用到的无损压缩编码(二)
    你所能用到的数据结构(二)
    你所能用到的数据结构(五)
    Attribute在.NET编程中的应用(四)
    对线程安全理解的例子
  • 原文地址:https://www.cnblogs.com/neso520/p/12491257.html
Copyright © 2020-2023  润新知