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屋!