Datatables动态表头,动态列渲染,可用

我理解的动态列就是在dt初始化的时候不确定列的多少,即columns里的内容是根据实际操作变化而变化,在这个前提下,我做了一个简单的实例,希望帮助到大家,看下面代码:

<div class="container">
    <!--table里不需要写th-->
    <table id="example" class="table table-striped table-bordered">
    </table>
</div>
 var table;
    var colunmsStr = "name,position,salary,start_date,office,extn";
    var columsName = {
        "name": "姓名",
        "position": "位置",
        "salary": "薪水",
        "start_date": "开始时间",
        "office": "办公",
        "extn": "其他"
    };
    $(function () {
        getAllColumnsName();

        $("#rebulidTable").click(function () {
            var columnArr = $("input[name='allColumns']:checked");
            var columnStrIn = "";

            var columnsArray = [];

            //动态组装列
            $(columnArr).each(function (i, o) {
                var json = {data: null, title: null};
                o = $(o);
                columnStrIn += o.val();
                if (i != columnArr.length - 1) {
                    columnStrIn += ",";
                }
                json.data = o.val();
                json.title = columsName[o.val()];
                columnsArray.push(json);
            });
            colunmsStr = columnStrIn;

            //改变列的结构,先销毁前面的实例
            table.destroy();
            // 列改变了,需要清空table
            $("#example").empty();
            table = createTable(columnsArray);
        });



        //第一次初始化,加载所有列
        var columns = [
            {"data": "name", "title": columsName["name"]},
            {"data": "position", "title": columsName["position"]},
            {"data": "salary", "title": columsName["salary"]},
            {"data": "start_date", "title": columsName["start_date"]},
            {"data": "office", "title": columsName["office"]},
            {"data": "extn", "title": columsName["extn"]}
        ];
        table = createTable(columns);
    });

    //公共方法,多次初始化调用
    function createTable(columns) {
        return $("#example").DataTable({
            ajax: {
                url: "/dynamicColumns.jsp",
                data: {
                    "cols": colunmsStr
                }
            },
            //因为需要多次初始化,所以需要设置允许销毁实例
            "destroy": true,
            //列的配置信息通过变量传进来
            "columns": columns,
            "language": {
                "lengthMenu": "每页_MENU_ 条记录",
                "zeroRecords": "没有找到记录",
                "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
                "infoEmpty": "无记录",
                "search": "搜索:",
                "infoFiltered": "(从 _MAX_ 条记录过滤)",
                "paginate": {
                    "previous": "上一页",
                    "next": "下一页"
                }
            }
        });
    }

  • 5
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 11
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值