jQuery DataTables 中的动态列

Question

在我的应用程序中，有一些列被赋予了特权。 如果该列没有被授予访问该特定列的权限，则不会显示。

我的代码是这样的：http://jsfiddle.net/oscar11/5jccbzdy/11/

// DataTable
    var table = $('#example').DataTable({
        "order": [[0, 'asc']],
        "drawCallback": function (settings){
            var api = this.api();

            // Zero-based index of the column containing names
            var col_name = 0;

            // If ordered by column containing names
            if (api.order()[0][0] === col_name) {
                var rows = api.rows({ page: 'current' }).nodes();
                var group_last = null;

                api.column(col_name, { page: 'current' }).data().each(function (name, index){
                    var group = name;
                    var data = api.row(rows[index]).data();

                    if (group_last !== group) {
                        $(rows[index]).before(
                            '<tr class="group" style="background-color:' + data[4] + '"><td colspan="5">' + group + '</td></tr>'
                        );

                        group_last = group;
                    }
                });
            }
        }
    });

如何让上面的代码变得更加动态并调整被赋予权限的列数？

如果被赋予权限的列数：5，那么：

'<tr class="group" style="background-color:' + data[4] + '"><td colspan="5">' + group + '</td></tr>'

如果被授予权限的列数：3，那么：

  '<tr class="group" style="background-color:' + data[2] + '"><td colspan="3">' + group + '</td></tr>'

谢谢

Answer 1

解决方案

您可以使用columns.name 选项为包含颜色的数据列定义名称。

然后在行分组代码中，您可以在api.column("color:name").index() 中使用column-selector color:name 来获取该列的索引。

使用下面的代码：

// DataTable
var table = $('#example').DataTable({
    "order": [[3, 'asc']],
    "columnDefs": [
        { targets: 3, name: "group" },
        { targets: -1, name: "color" }
     ],
    "drawCallback": function (settings){
        var api = this.api();

        // Zero-based index of the column containing group names
        var col_name = api.column("group:name").index();
        var col_color = api.column("color:name").index();

        // If ordered by column containing names
        if (api.order()[0][0] === col_name) {
            var rows = api.rows({ page: 'current' }).nodes();
            var group_last = null;

            api.column(col_name, { page: 'current' }).data().each(function (group, index){
                if (group_last !== group){                        
                    var color = api.cell({
                        row: api.row(rows[index]).index(),
                        column: col_color 
                    }).data();

                    $(rows[index]).before(
                        '<tr class="group" style="background-color:' + color + '"><td colspan="5">' + group + '</td></tr>'
                    );

                    group_last = group;
                }
            });
        }
    }
});

演示

有关代码和演示，请参阅this jsFiddle。