Question

    $(document).ready(function() {
      var table = $('#example').DataTable( {
     } );
      var table = $('#example2').DataTable( {
      });

     $('input.toggle-vis').on( 'click', function (e) {
            // e.preventDefault(); //empêche la mise à jour des check

    // Get the column API object
     var column = table.column( $(this).attr('data-column') );

    // Toggle the visibility
    column.visible( ! column.visible() );
    } );



} );

我的活动＆＃34; input.column-toggle＆＃34;仅适用于我的上一个表（example2）......

我如何为所有a.column-toggle类的事件工作做什么？

Answer 1

您正在使用table变量查找表格内的列。但是你在连续的语句中为同一个变量分配了两个东西（example1和example2）。因此，example2替换了table变量中的example1。您丢失了与example1相关的信息。

您需要两个变量table1和table2。然后在两者上执行列隐藏操作。例如类似的东西（我还没有测试过）：

$(document).ready(function() {
      var table1 = $('#example').DataTable( {
     } );
      var table2 = $('#example2').DataTable( {
      });
     $('input.toggle-vis').on( 'click', function (e) {

    // Get the column API object
     var column1 = table1.column( $(this).attr('data-column') );
     var column2 = table2.column( $(this).attr('data-column') );

    // Toggle the visibility
    column1.visible( ! column1.visible() );
    column2.visible( ! column2.visible() );
    } );
} );

或者，如果您需要在多个表上执行此操作，或者希望将来灵活地添加更多表，您可能需要考虑创建一个表数组，然后循环遍历数组，对每个元素执行相同的操作。

多个数据表切换列

1 个答案: