jqueryデータテーブルを持つ複数のテーブルに選択メニューを追加するpluglin

Question

構造的には同じですが、異なるソースから供給される2つのテーブル（table1、table2）があります。両方のテーブルは、両方のテーブルのプラグインを初期化するために使用するクラス 'display'を共有しています。これはほとんどの場合、table2の列フィルタ選択メニューがtable1に重複しています。

「this」というキーワードを使用して、フィルタが適用する必要があるツールバーの特定のインスタンスを示すようにしましたが、それほど成功しませんでした。

動作するコードは次のとおりです。

HTML：

<table id="table1" class="display table-striped table-borded table-hover" cellspacing="0" width="100%"> 
<thead> 
    <tr> 
     <th>Report Name</th> 
     <th>Year</th> 
     <th>Montly Snapshot</th> 
    </tr> 
</thead> 
<tfoot> 
    <tr> 
     <th>Date of Last Refresh --var from warehouse-- </th> 
    </tr> 
</tfoot> 
</table> 
<table id="table2" class="display table-striped table-borded table-hover" cellspacing="0" width="100%"> 
<thead> 
    <tr> 
     <th>Report Name</th> 
     <th>Year</th> 
     <th>Montly Snapshot</th> 
    </tr> 
</thead> 
    <tfoot> 
      <tr> 
     <th>Date of Last Refresh --var from warehouse-- </th> 
    </tr> 
</tfoot> 
</table> 

JS：

//initialise data tables plugin and apply custom settings. 
var reportstable = $('table.display').DataTable({ 
"sDom": '<"toolbar">Bfrtlp', 
"searchCols": [ 
    null, { 
     'sSearch': 'Current' 
    } 
], 
language: { 
    search: "_INPUT_", 
    searchPlaceholder: "Search for a Report..." 
}, 
// create select form controls 
initComplete: function() { 

    this.api().columns([1, 2]).every(function() { 

     var column = this; 
     var select = $('<select><option value=""></option></select>') 

     .appendTo($('.toolbar')) 
      .on('change', function() { 

       var val = $.fn.dataTable.util.escapeRegex(

        $(this).val() 
       ); 

       column 

        .search(val ? '^' + val + '$' : '', true, false) 
        .draw(); 

      }); 

     column.data().unique().sort().each(function(d, j) { 

      select.append('<option value="' + d + '">' + d + '</option>') 
      if ($('#info').css('display') == 'block') { 

       $("#reports_wrapper").css('display', 'none'); 
      } 

      // add bootstrap classes and placeholder property to form controls to add style 
      $('.toolbar select').addClass('selectpicker'); 
      $('.dt-button').addClass('btn btn-danger').removeClass('dt-button'); 
      $('.toolbar select').attr('id', 'year'); 

      $('#year').prop('title', 'Financial Year'); 
      $("#year option:contains('Current')").remove(); 

      $('.toolbar select:nth-of-type(2)').attr('id', 'month'); 
      $('#month').prop('title', 'Monthy Snapshot'); 
      $("#month option:contains('undefined')").remove(); 


     }); 
    }); 
}, 

// create clear filter button 
buttons: [ 

    { 
     text: 'Clear Filters', 
     action: function(e, dt, node, config) { 

      $('select').val('').selectpicker('refresh'); 

      // set Current Year as default filter 
      reportstable 

       .search('') 
       .columns([1]).search('Current') 
       .columns([2]).search('') 
       .draw(); 

     } 
    } 

], 

//hide specified columns 
"columnDefs": [ 

    { 
     "targets": [1], 
     "visible": false, 
     "searchable": true 
    }, { 
     "targets": [2], 
     "visible": false, 
     "searchable": true 
    } 
] 
}); 

Answer 1

私はあなたのjsfiddleを更新し、新しいjsfiddleを作成しました。両方のテーブルのラッパーdivに2つの選択メニューが追加されています。私はなぜtable1のラッパーdivに2の代わりに4つの選択メニューを追加しているのか分かりました。このコードのためです：.appendTo($('.toolbar'))。 Table1に対してinitCompleteコールバック関数が呼び出されると、class = toolbarのdivが1つしかなく、table2に対してinitCompleteコールバック関数が呼び出されると、class = toolbarのdivが2つあります.1つはtable1のラッパーdivに、もう1つはtable2のラッパーdivにあります。そのため、table2のinitCompleteコールバック関数では、class = toolbarを持つすべてのdivに選択メニューが追加されます。クラス=ツールバーを使用して、現在のテーブルラッパーのdivに追加する必要があります。