Question

在我的表中，每个列标题（第一个除外）都有一个名为“group”的隐藏输入字段。我想实现按钮以根据特定列的可见性来切换特定列的可见性。我坚持找到合适的列选择器来获取所有列，例如输入字段值为“group1”。

目前我的按钮看起来像这样，并且使用简单的选择器，如'：gt（0）'，它的效果非常好。

buttons: [
    {
        extend: 'columnToggle',
        text: 'Toggle Group1',
        columns: //get all columns with input value equals 'group1'
    }
]

我已经尝试过jquery选择器的一些东西，但我不能让它正常工作。

我已经构建了一个带有数据表的小测试用例： Testcase

感谢您的帮助

Answer 1

您是否尝试过对每个列应用一个类，然后按如下方式切换，而不是使用隐藏的输入？：

$(document).ready( function () {
  var table = $('#example').DataTable( {
    columns: [
    { className: "group1" },
    { className: "group2" },
    { className: "group1" },
    { className: "group2" },
    { className: "group2" },
    { className: "group2" },
  ],
    dom: 'Bfrtip',
    buttons: [
      {
        extend: 'columnToggle',
        text: 'Toggle Group1',
        columns: '.group1'
      },
      {
        extend: 'columnToggle',
        text: 'Toggle Group2',
        columns: '.group2'
      }
    ]
  });
} );

可以在这里找到一个实例： http://live.datatables.net/howaxeju/1/edit

有关将类应用于列的更多信息，请参阅以下页面： https://datatables.net/reference/option/columns.className

Answer 2

试试这段代码：

var table = $('#example').DataTable( {
   dom: 'Bfrtip',
   buttons: [
     {
       extend: 'columnToggle',
       text: 'Toggle Group1',
       columns: $('#example thead th input[value="group1"]').closest('th')  
     }
   ]
});

请参阅updated example以获取代码和演示。

但是，最好使用th元素的类名，并按类名切换列，请参阅优秀的answer by Zejji Zejji。

如何根据隐藏的输入值切换列可见性？

2 个答案: