javascript - 数据表 Colvis 响应式

Question

研究如何将数据表 colvis 扩展和响应式结合起来。 搜索一下，以前的版本是不可能的。想知道是否有进展，或者是否有人找到了让他们一起工作的方法。 我想要做的:保持表格的响应能力(在不同的窗口大小上缩小和扩展)并能够选择哪些列可见。 现在我可以隐藏所需的列，但是当更改窗口大小时，所有列都变得可见，并且响应式会覆盖 colvis 设置。

Answer 1

我找到了实现 Buttons extension with Column visibility 的解决方案和 Responsive extension 。 您必须使用 Buttons 扩展，因为 Colvis已退休。

第一个解决方案是将两个扩展添加在一起，它可以工作。 Link .
只需将表格宽度设置为100%即可。

<table id="example" class="display" cellspacing="0" width="100%">

$('#example').DataTable( {
    dom: 'Bfrtip',
    buttons: [
        'colvis'
    ],
    responsive: true
} );

下一个解决方案:Link
您必须将响应式类添加到标记table，并在JavaScript中仅调用Buttons colvis扩展。

<table id="example" class="display responsive nowrap" width="100%">

$(document).ready( function () {
  var table = $('#example').DataTable({
    dom: 'Bfrtpi',
    buttons: [
        'colvis',
        'colvisRestore'
    ],
    columns: [
      null,
      {visible: false}
    ]
  });
});

Testing很简单 - 单击按钮列可见性后，尝试更改输出div(或您的浏览器窗口)的宽度，并且列按宽度隐藏或显示的窗口。