javascript - 数据表Colvis响应式

寻找如何结合colvis扩展和响应式数据表。
搜索过去的版本是不可能的。想知道是否有进展，还是有人找到了使他们一起工作的方法。
我要做什么：保持表格的响应能力（在不同的窗口大小上缩小和扩展），并能够选择可见的列。
现在，我可以隐藏所需的列，但是当更改窗口大小时，所有列都变为可见，并且响应式会覆盖colvis设置。

最佳答案

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

第一个解决方案是将两个扩展名加在一起，就可以了。 Link。
只有您需要将表格宽度设置为100%。

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

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

下一个解决方案：Link
您必须添加responsive类以标记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很简单-单击按钮Column visibility后，尝试更改输出width（或浏览器窗口）的div，并且按窗口宽度隐藏或显示列。

关于javascript - 数据表Colvis响应式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30616344/

ColVis

javascript - 数据表Colvis响应式