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选项为包含颜色的数据列定义名称。

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

使用以下代码：

// 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以获取代码和演示。

jQuery DataTables中的动态列

1 个答案: