jquery.dataTables动态列

最新推荐文章于 2021-08-05 20:37:50 发布

weixin_30480075

最新推荐文章于 2021-08-05 20:37:50 发布

阅读量175

点赞数

文章标签： javascript json ViewUI

原文链接：http://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>

tableHtml

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

关键代码

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