複数のデータテーブルに対してスクリプトを実行する

Question

JadeとbootstrapおよびjQuery DataTablesを使用して作成したテーブルがいくつかあります。個々の列のフィルタリングを可能にするコードをいくつか含めました。ただし、関数が適用されているのと同じIDで識別されていても、最初のテーブルでのみ完全に機能します。コードは以下の通りである：

のDataTableのAPIで見つけることができるの例のように

script. 
     $(document).ready(function() { 
      $('.datatable tfoot th').each(function() { 
       var title = $(this).text(); 
       $(this).html('<input type="text" placeholder="Search ' +title+'" />'); 
      }); 

      var table = $('.datatable').DataTable(); 

      table.columns().every(function() { 
       var that = this; 

       $('input', this.footer()).on('keyup change', function() { 
        if (that.search() !== this.value) { 
         that 
          .search(this.value) 
          .draw(); 
        } 
       }); 
      }); 
     }); 

：https://datatables.net/examples/api/multi_filter.html

私のテーブルは、両方のID .datatableで識別され、それらは、ヘッダーに&フッターを従っていることコードを操作します。両方のテーブルは関数の結果としてテキストボックスを表示しますが、最初のものだけが実際にフィルタリングを実行します。複数のテーブルに対してこの関数をどのように使用できるかについてのアドバイスはありがたいです。次のように

私の完全なコードは次のとおりです。

extends layout 

block content 
head 
    meta(charset='utf-8') 
    meta(http-equiv='X-UA-Compatible', content='IE=edge') 
    meta(name='viewport', content='width=device-width, initial-scale=1') 
    link(href='css/bootstrap.min.css', rel='stylesheet') 
    link(rel='stylesheet', href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css') 
    script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js') 
    script(src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js') 
    title Bootstrap Example 
body 
    script(src='http://code.jquery.com/jquery.js') 
    script(src='js/bootstrap.min.js') 
    .container 
     .jumbotron 
      .mark 
       h2 Bootstrap/Datatables Test Page 
     .megasearch 
      h3 Search All Tables 
      input#Search_All 
     br 
     br 



     // TABLE ONE 
     table.datatable.table.table-hover.table-striped.table-bordered 
      thead 
       tr 
        th # 
        th Name 
        th Type 
        th Battery 
      tfoot 
       tr 
        th # 
        th Name 
        th Spice 
        th Approval 
      tbody 
       tr 
        th(scope='row') 1 
        td BOSS RC-1 
        td Loop 
        td Yes 
       tr 
        th(scope='row') 2 
        td Line 6 DL4 
        td Delay 
        td Yes 
       tr 
        th(scope='row') 3 
        td Polara 
        td Reverb 
        td Yes 
     br 
     br    
     // TABLE TWO 
     table.datatable.table.table-hover.table-striped.table-bordered 
      thead 
       tr 
        th # 
        th Name 
        th Spice 
        th Approval 
      tfoot 
       tr 
        th # 
        th Name 
        th Spice 
        th Approval      
      tbody 
       tr 
        th(scope='row') 1 
        td Pickle 
        td No 
        td Yes 
       tr 
        th(scope='row') 2 
        td Jalapeno 
        td Yes 
        td Yes 
       tr 
        th(scope='row') 3 
        td Pickled Onions 
        td No 
        td Yes 
       tr 
        th(scope='row') 3 
        td Pickled Onions 
        td No 
        td Yes        
       tr 
        th(scope='row') 3 
        td Pickled Onions 
        td No 
        td Yes 
       tr 
        th(scope='row') 3 
        td Pickled Onions 
        td No 
        td Yes 
       tr 
        th(scope='row') 3 
        td Pickled Onions 
        td No 
        td Yes 
       tr 
        th(scope='row') 3 
        td Pickled Onions 
        td No 
        td Yes 
       tr 
        th(scope='row') 3 
        td Pickled Onions 
        td No 
        td Yes 
       tr 
        th(scope='row') 3 
        td Pickled Onions 
        td No 
        td Yes 
       tr 
        th(scope='row') 3 
        td Pickled Onions 
        td No 
        td Yes                         

    // SCRIPTS REQUIRED FOR DATATABLES AND FUNCTION FOR SEARCH_ALL  
    script(src='https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css') 
    script(src='https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js') 
    script(src='https://cdn.datatables.net/1.10.12/js/jquery.dataTables.js') 
    script. 
     $(document).ready(function() { 
      $('.datatable').DataTable({ 
       "pagingType": "full_numbers" 
      }); 


      // THIS IS THE GLOBAL SEARCH CODE 
      $.fn.dataTableExt.oApi.fnFilterAll=function(oSettings,sInput,iColumn,bRegex,bSmart){ 
       var settings = $.fn.dataTableSettings; 
       for (var i = 0; i < settings.length; i++) { 
        settings[i].oInstance.fnFilter(sInput, iColumn, bRegex, bSmart); 
       } 
      }; 

      var table = $(".datatable").dataTable(); 


      $("#Search_All").keyup(function() { 
       // Filter on the column (the index) of this element 
       table.fnFilterAll(this.value); 
      }); 
     }); 

    script. 
     $(document).ready(function() { 
      $('.datatable tfoot th').each(function() { 
       var title = $(this).text(); 
       $(this).html('<input type="text" placeholder="Search ' +title+'" />'); 
      }); 

      var table = $('.datatable').DataTable(); 

      table.columns().every(function() { 
       var that = this; 

       $('input', this.footer()).on('keyup change', function() { 
        if (that.search() !== this.value) { 
         that 
          .search(this.value) 
          .draw(); 
        } 
       }); 
      }); 
     }); 

Answer 1

あなただけのDataTableにクラスを追加しました。代わりに、両方に一意のid属性を使用してください。 datatable1、datatable2のように。その後

パラメータとしてidを持つ関数内のコードをラップ：

function initMyDataTable(id){ 
     $('#'+id+' tfoot th').each(function() { 
      var title = $(this).text(); 
      $(this).html('<input type="text" placeholder="Search ' +title+'" />'); 
     }); 

     var table = $('#'+id).DataTable(); 

     table.columns().every(function() { 
      var that = this; 

      $('input', this.footer()).on('keyup change', function() { 
       if (that.search() !== this.value) { 
        that 
         .search(this.value) 
         .draw(); 
       } 
      }); 
     }); 
} 

今、あなたは、目的のテーブルのIDでこの関数を呼び出すことができます。

initMyDataTable('datatable1'); 
initMyDataTable('datatable2');