複数のデータ・テーブル・トグル列

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



}); 

マイイベント「input.column-トグルは、」私だけの最後のテーブル（例2）のために働く...

どのように私はすべての私のa.columnのイベントの仕事のために行うことができますトグルクラス？

Answer 1

table変数を使用して、テーブル内の列を検索しています。しかし、連続した文で同じ変数に2つのもの（example1とexample2）を割り当てました。したがって、example2は、table変数のexample1を置き換えています。 example1に関連する情報を失ってしまった。

table1とtable2の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()); 
    }); 
}); 

それとも、あなたはいくつかのテーブルの上にこれを実行する必要がある、または将来的に柔軟に複数のテーブルを追加したい場合は、あなたがテーブルの配列を作成することを検討する必要があります（私はそれをテストしていない）のようなもの配列をループして、各要素に対して同じアクションを実行します。