jquery.dataTables动态列--转

转自 https://www.cnblogs.com/lyeo/p/4765514.html

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

 

 将配置项放后台获取，在获取完毕后再获取data。