如何使 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 or DataTablesExample

产生以下 table，允许用户通过单击 Toggle column 旁边的 link 来切换六列。

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

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

Answer 1

您可以显示子项中的剩余信息table

参见：https://www.datatables.net/examples/api/row_details.html

Answer 2

使用 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 or 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 进行演示。

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

How to make DataTables show only subset of columns then allowing others to appear by toggling

javascript

jquery

datatables

jquery-datatables