显示和隐藏多列
注意:这个需要使用Bottons扩展
把需要显示/隐藏的列的控制进行分组
The show and hide
parameters of this button are both
column-selectorType
types defining the columns in the table that should be shown or hidden respectively.
If a column is not defined in either, its visibility is not altered.
请注意:不同于其他按钮的是,他没有默认的标题,所以你必须通过
buttons.buttons.textOption
配置按钮上显示的文字
这个按钮有以下选项配置:
| 名称 | 默认 |
|---|---|
className |
buttons-colvisGroup |
按钮的class名称,详情参见
buttons.buttons.classNameOption
|
|
action |
|
| 设置列的可见性 | |
show |
[] |
| 配置的列可见 | |
hide |
[] |
| 从可见列的数组中移除 | |
Datatables初始化:使用类名进行分组
$('#myTable').DataTable( {
buttons: [
{
extend: 'colvisGroup',
text: 'Office info',
show: '.office',
hide: '.hr'
},
{
extend: 'colvisGroup',
text: 'HR info',
show: '.hr',
hide: '.office'
}
]
} );
直接初始化:显示/隐藏所有列
$('#myTable').DataTable( {
buttons: [
{
extend: 'colvisGroup',
text: 'Show all',
show: ':hidden'
},
{
extend: 'colvisGroup',
text: 'Show none',
hide: ':visible'
}
]
} );
Translation from DataTables.net, with permission