javascript - 当数据表的特定列隐藏时,如何禁用列切换?

标签 javascript jquery 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,          

                });

最佳答案

您需要指定要由 colvis 切换哪些列。

查看the reference on hiding columnsthe reference on selecting columns

由于您知道要隐藏 id 为 1 的列,因此您需要向数据表添加一个额外的选项

colVis: {
    exclude: [ 1 ]

}

编辑:

尝试更换

'colvis',

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

并删除

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

从代码的底部

关于javascript - 当数据表的特定列隐藏时,如何禁用列切换?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40842405/

相关文章:

javascript - 使用for循环检查所有元素是否满足条件

javascript - 使用 javascript/jquery 获取 Youtube 视频信息

javascript - DataTable - 为什么我无法进行单个列搜索(选择输入)?

asp.net - DataTable Wrapper 或如何将 UI 与业务逻辑分离

javascript - 将 datatables.js 样式应用于 ajax 加载的表

javascript - 如何将CSS添加到jquery

javascript - 使用 Jquery 加载文档时选择下拉选项

javascript - 在.html()中查找类

javascript - 精简代码

jquery - 当至少选中两个复选框时显示 div