如何隐藏Datatable的特定列的列切换?

时间:2016-11-28 10:47:07

标签: javascript jquery datatable

我正在为我的项目使用Datatable插件。我已启用colvis功能来帮助表导出。现在我想使用下面的脚本为用户隐藏一些列:

 columnDefs : [
  { targets: 1, visible: (department == '6')||(department == '0'),
   "searchable": false,className:'none' }
]

它的工作正常,因为列被隐藏,而且它也无法搜索。但是由于我启用了colvis,列名在列表中可见,当用户选择隐藏列时,它将显示。任何人都可以建议我如何禁用列切换?

还尝试指定列以排除colvis但不使用。

columnDefs : [
  { targets: 1, visible: (department == '6')||(department == '0'),
   "searchable": false,className:'never', responsive: false ,colVis: {
    exclude: [ 1 ]
}},

],

以下是我的补充数据表脚本。

 $('#page_effect').fadeIn(2000);
                var table = $('#testTable').DataTable({
                    mark: true,
                    responsive: true,
                   "dom": 'flit',
                    columns: [
                        {className: "group1"},
                        {className: "group2"},
                        {className: "group1"},
                        {className: "group2"},
                        {className: "group2"},
                        {className: "group2"},
                        {className: "group2"},
                        {className: "group2"},
                        {className: "group2"},
                        {className: "group2"},
                        {className: "group2"},
                        {className: "group2"},
                        {className: "group2"},
                        {className: "group2"},
                        {className: "group2"},
                        {className: "group2"},
                        {className: "group2"},
                        {className: "group2"},
                    ],
                    dom: 'Bfrtip',
                    buttons: [{
                            extend: 'collection',
                            text: "More options",
                            buttons: [
                                'pageLength',
                                {
                                    extend: 'copyHtml5',
                                    exportOptions: {
                                        columns:  ':visible'
                                    }
                                },
                                {
                                    extend: 'excelHtml5',
                                    title: 'Book',
                                    exportOptions: {
                                        columns: ':visible'
                                    }
                                },
                                {
                                    extend: 'pdfHtml5',
                                    title: 'Book',
                                    exportOptions: {
                                        columns: ':visible'
                                    }
                                },
                                {
                                    extend: 'print',
                                    title: 'Book',
                                    exportOptions: {
                                        columns: ':visible'
                                    }
                                },
                                {
                                    extend: 'excel',
                                    title: 'Book',
                                    text: 'Export selected',
                                    exportOptions: {
                                        columns: ':visible',
                                        modifier: {
                                            selected: true
                                        }
                                    }

                                },
                                {
                                    extend: 'columnToggle',
                                    text: 'Toggle Group1',
                                    columns: '.group1'
                                },
                                {
                                    extend: 'columnToggle',
                                    text: 'Toggle Group2',
                                    columns: '.group2'
                                },

                                'colvis',

                            ],
                        }],
                     dom: 'Bfrtip',
                      lengthMenu: [
            [ 10, 25, 50, 250 ],
            [ '10 rows', '25 rows', '50 rows', '250 rows' ]
        ],
        columnDefs : [
  { targets: 1, hidden: (department == '6')||(department == '0'),
   "searchable": false,className:'never', responsive: false ,
   buttons:[
                {
            extend: 'colvis',
            columns: ':gt(0)'
        } ],
},

],
                    scrollY: 300,
                    scrollX: true,
                    scrollCollapse: true,
                    paging: true,
                    fixedColumns: true,
                    select: true,          

                });

1 个答案:

答案 0 :(得分:0)

您需要指定要通过colvis切换的列。

结帐the reference on hiding columnsthe reference on selecting columns

由于您知道要隐藏ID为1的列,因此您需要为DataTable添加一个额外选项

colVis: {
    exclude: [ 1 ]

}

编辑:

尝试替换

'colvis',

通过

{
    extend: 'colvis',
    columns: ':gt(1)'
},

并删除

buttons:[{
    extend: 'colvis',
    columns: ':gt(0)'
}],

来自代码的底部