javascript - 如何使 DataTables 仅显示列的子集，然后通过切换允许其他列出现

Question

我有以下 JS

$(document).ready(function() {
    var table = $('#example').DataTable( {
        "scrollY": "200px",
        "paging": false
    } );

    $('a.toggle-vis').on( 'click', function (e) {
        e.preventDefault();

        // Get the column API object
        var column = table.column( $(this).attr('data-column') );

        // Toggle the visibility
        column.visible( ! column.visible() );
    } );
} );

JSFiddle 或 DataTablesExample

这会生成下表，允许用户通过单击 Toggle column 旁边的链接来切换六列。

然后我想做的是让表格默认只显示 Name 和 Position 列，并隐藏其余列。只有当用户切换他们喜欢的其他列时，它们才会出现。如何实现？

实际上我有大约 50 列要显示。目前它溢出了页面。 不确定显示这种情况的最佳方式是什么。

Answer 1

使用 ColVis

您需要使用 ColVis extension用于数据表。

很可能您最初想要隐藏一些列，您可以使用下面的代码来实现。

var oTable = $('#example').DataTable({
   "dom": 'C<"clear">lfrtip',
   "columnDefs" : [          
       { "targets": [4,5], "visible": false }
   ]
});

参见 this JSFiddle用于演示。

ColVis 扩展还允许您 group columns并切换组可见性而不是单个列，如果您有 50 个字段，这可能会有所帮助。

如果你有那么多字段，我也会考虑显示extra details或 responsive extension与 ColVis 一起，您可以将它们整合在一起。

没有 ColVis

它也可以在没有 ColVis 的情况下使用下面的代码完成:

HTML

<p>Toggle: <a href="javascript:;" class="column-toggle" data-id="4">Start date</a> | <a href="javascript:;" class="column-toggle" data-id="5">Salary</a></p>
<table id="example" class="display" cellspacing="0" width="100%">
<!-- skipped -->
</table>

JavaScript

var oTable = $('#example').DataTable({
    "dom": 'lfrtip',
    "columnDefs" : [          
        { "targets": [4,5], "visible": false }
     ]
});

$('a.column-toggle').on('click', function(e){
    var column = oTable.column($(this).data('id'));
    column.visible(!column.visible());
    e.preventDefault();
});

参见 this JSFiddle用于演示。