javascript - 多个数据表切换列

    $(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() );
    } );



} );

我的事件“ input.column-toggle”仅适用于我的上一张表（example2）...

如何为所有a.column-toggle类的活动做准备？

最佳答案

您正在使用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() );
    } );
} );

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