jquery.dataTables動態列

jquery.dataTables  版本1.10.7

直接上代碼:

0、table

    <table id="popReportTable">
        <thead>
            <tr id="trId">
                <td>顯示名,這里可以給tr一個id，然后用$("#trId").html("列名...")來改變顯示列名</td>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

1、生成動態列

            //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);
            }

2、設置dataTables配置項

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

3、dataTables創建並且生成（這么寫的原因：每次動態列字符串改變，dataTables也會跟着改變）

            //這樣寫就能把datatable完全重新載入
            $('#popReportTable').DataTable().clear();
            $('#popReportTable').DataTable().destroy();
            $('#popReportTable').DataTable(settings);