jquery.dataTables動態列--轉

轉自 https://www.cnblogs.com/lyeo/p/4765514.htmlhtml

jquery.dataTables  版本1.10.7jquery

直接上代碼:ajax

0、tablejson

    <table id="popReportTable">
        <thead>
            <tr id="trId">
                <td>顯示名,這裏能夠給tr一個id,而後用$("#trId").html("列名...")來改變顯示列名</td>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

 

一、生成動態列url

//dataTables的json返回的列名
            var columnList = [];      //顯示列對應的json字段

            var columnStr = "Id,Name,Code,Age,Pwd";
            
            colArr = columnStr.split(',');
            for (var i = 0; i < colArr.length; i++) {
                var obj = {};
                obj['data'] = colArr[i];
                columnList.push(obj);
            }

 

二、設置dataTables配置項spa

var settings = {
                "ajax": 'url地址',
                "retrieve": true,
                "columns": columnList
            };

 

三、dataTables建立而且生成(這麼寫的緣由:每次動態列字符串改變,dataTables也會跟着改變)code

//這樣寫就能把datatable徹底從新載入
            $('#popReportTable').DataTable().clear();
            $('#popReportTable').DataTable().destroy();
            $('#popReportTable').DataTable(settings);

 

 將配置項放後臺獲取,在獲取完畢後再獲取data。htm

相關文章
相關標籤/搜索