如何使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个字段，这可能会有所帮助。

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

没有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进行演示。

Answer 2

您可以在子表中显示剩余信息

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