jQuery数据表中的动态列 [英] Dynamic column in jQuery DataTables

问题描述

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

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

  // DataTable 
 var table = $（'＃example'）。DataTable（{
order：[[0，'asc']]，
drawCallback：function（settings）{
 var api = this.api（）; 
 
 //包含名称的列的基于零的索引
 var col_name = 0; 
 
 //如果按列包含名称
 if（api.order（）[0] [0] === col_name）{
 var rows = api .rows（{page：'current'}）。nodes（）; 
 var group_last = null; 
 
 api.column（col_name，{page：'current'}） ）.each（function（name，index）{
 var group = name; 
 var data = api。 row（rows [index]）。data（）; 
 
 if（group_last！== group）{
 $（rows [index]）。before（
'< tr class =groupstyle =background-color ：'+ data [4] +'>< td colspan =5>'+ group +'< / td>< / tr>'
）; 
 
 group_last = group; 
} 
}）; 
} 
} 
}）; 
  

如何使上述代码变得更加动态并调整提供权限的列数？ / p>

如果提供特权的列数：5，那么：

 '< tr class =groupstyle =background-color：'+ data [4] +'>< td colspan =5>'+ group +'< / td>< ; / tr>'
  

如果给出权限的列数：3，那么： p>

 '< tr class =groupstyle =background-color：'+ data [2] +'>< ; td colspan =3>'+ group +'< / td>< / tr>'
  

谢谢

解决方案

解决方案

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

然后在行分组代码中，您可以使用列选择器 颜色：名称在 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（）; 
 
 //包含组名的列的基于零的索引
 var col_name = api.column（group：name）。index（）; 
 var col_color = api.column（color：name）。index（）; 
 
 //如果按列包含名称
 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 =groupstyle =background-color：'+ color +'>< td colspan = 5>'+ group +'< / td>< / tr>'
）; 
 
 group_last = group; 
} 
}） ; 
} 
} 
}）; 
  

DEMO

请参阅此jsFiddle 代码和演示。

In my application there are some columns that were given privileges. If the column is not given the right to access that particular column is not shown.

My code is like this : 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;
                    }
                });
            }
        }
    });

How to make the above code becomes more dynamic and adjusting the number of columns that are given privileges?

If the number of columns that were given privileges: 5, then:

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

If the number of columns that were given privileges: 3, then:

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

Thank you

解决方案

SOLUTION

You can use columns.name option to define a name for data column containing color.

Then in the row grouping code you can use column-selector color:name in api.column("color:name").index() to get index of that column.

Use the code below:

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

DEMO

See this jsFiddle for code and demonstration.

这篇关于jQuery数据表中的动态列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！