多个数据表切换列

multiple data table toggle column

本文关键字：数据表      更新时间：2023-09-26
    $(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"仅适用于我的最后一个表(示例 2(...

我

怎样才能为我所有的 a.column-切换类做事件工作？

您使用 table 变量来查找表中的列。但是，您在连续语句中为同一变量分配了两件事(示例 1 和示例 2(。因此，示例 2 替换了 table 变量中的示例 1。您丢失了与示例 1 相关的信息。

您需要两个变量，表 1 和表 2。然后对两者执行列隐藏操作。例如(我还没有测试过(：

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

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

相关文章：