テーブルの外にある2つのグループのカラム可視性トグルボタン

Question

My DataTableはVisibility toggle buttonsを使用していますが、すべて正常に機能していますが、カラムとボタンを「分類」したいと考えています。

我々は、合計で5つの列があり、左に、私たちは、カテゴリの野菜や果物とサイドバーがあります。ここでの問題は、DataTableのは、私は果物と野菜の中にボタンを切り離すことができないことを意味いくつかのデフォルトのオプション

buttons: [ 
    'columnsToggle' 
], 

を使用している、私はボタンを分類するように見えることができないということです。

Answer 1

果物の場合はgroup1、野菜の場合はgroup2のように、さまざまなクラスをth要素に割り当てることで、これを行うことができます。

次に、次のコードを使用して2列の列表示ボタンを作成し、適切なボタンコンテナに挿入します。例えば

：

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

    var buttons1 = new $.fn.dataTable.Buttons(table, { 
     buttons: [ 
      { 
       extend: 'columnsToggle', 
       columns: '.group1' 
      }, 
     ] 
    }).container().appendTo($('#buttons-group1')); 

    var buttons2 = new $.fn.dataTable.Buttons(table, { 
     buttons: [ 
      { 
       extend: 'columnsToggle', 
       columns: '.group2' 
      }, 
     ] 
    }).container().appendTo($('#buttons-group2')); 
}); 

は、コードやデモンストレーションのためthis example参照してください。