Question

我在我的应用程序中使用DataTables jquery插件。在我的表中，一些列不可见。我正在尝试使用可见性按钮来隐藏/显示已显示的列。但我不希望隐藏或显示隐藏在表定义中的列，它们仅在jquery中用于自定义过滤器。我在doc中使用了这个例子，但它只隐藏了第一个孩子。我想隐藏我在列定义中隐藏的所有列。我尝试了很多不同的语法，但没有任何成功。

var table = $('#mytable').DataTable({
    dom: 'Brtip',
    "scrollX": true,
    "columnDefs": [
        { "targets": [ 11 ], "visible": false},
        { "targets": [ 12 ], "visible": false},
        { "targets": [ 13 ], "visible": false},
        { "targets": [ 14 ], "visible": false},
        { "targets": [ 15 ], "visible": false},
        { "targets": [ 16 ], "visible": false},
        { "targets": [ 17 ], "visible": false},
        { "targets": [ 21 ], "visible": false},
        { "targets": [ 22 ], "visible": false},
        { "targets": [ 23 ], "visible": false},
        { "targets": [ 24 ], "visible": false},
        { "targets": [ 25 ], "visible": false},
        { "targets": [ 26 ], "visible": false},
        { "targets": [ 27 ], "visible": false}
    ],
    "order": [[ 0, "desc" ]],
    buttons: [
        {
            extend: 'colvis',
            collectionLayout: 'fixed two-column',
            columns: ':not(:first-child)'
        },
        {
            extend: 'copyHtml5',
            exportOptions: {
                columns: [ 0, ':visible' ]
            }
        }
    ],
});

Answer 1

您可以使用api方法table.visible(INDEX_COL)，e。： https://datatables.net/reference/api/column().visible()

Answer 2

您可以区分要隐藏的列，并使用按钮为其指定特定类（例如“dynamicColumn”）

var table = $('#mytable').DataTable({
    dom: 'Brtip',
    "scrollX": true,
    "columnDefs": [
        { className: "dynamicColumn", "targets": [ 10]}, //visible column
        { "targets": [ 11 ], "visible": false}, //always hidden column
        [...]
    ],
    "order": [[ 0, "desc" ]],
    buttons: [
    {
        extend: 'colvis',
        collectionLayout: 'fixed two-column',
        columns: ':not(:first-child)'
    },
    {
        extend: 'copyHtml5',
        exportOptions: {
            columns: [ 0, ':visible' ]
        }
    }
]
});

然后，您可以选择使用DataTables显示或隐藏它们columns().visible() API

table.columns( '.dynamicColumn' ).visible( false ); //hide all dynamic columns
table.columns( '.dynamicColumn' ).visible( true );  //show all dynamic columns

Answer 3

没有那么复杂，我将行columns: ':not(:first-child)'改为columns:[0,1,2,3,4,5,6,7,8,9,10,13,14,15,16,17,18,19,20]。通过这种方式，我只需要定义我想要显示的列，而不是我想要隐藏。

DataTables ColVis扩展列可见性

3 个答案: