Получение сценария для работы для нескольких данных

Question

У меня есть пара таблиц, которые я создал с помощью Jade, помимо бутстрапа и jQuery DataTables. Я включил некоторый код, чтобы сделать отдельную фильтрацию столбцов возможной; однако он полностью работает только в первой таблице, хотя оба они идентифицированы с помощью того же идентификатора, к которому применяется функция. Код выглядит следующим образом:

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

согласно примеру, который можно найти в DataTables API: https://datatables.net/examples/api/multi_filter.html

мои таблицы и отождествляется с ID .datatable, и они по HEADERS & колонтитулы, что работать с кодом. Обе таблицы показывают текстовые поля в результате функции, но только первая фактически выполняет фильтрацию. Любые советы о том, как я мог бы использовать эту функцию для нескольких таблиц, были бы оценены, спасибо!

мой полный код выглядит следующим образом:

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.

Затем обернуть свой код в функции с идентификатором в качестве параметра:

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

Теперь вы можете вызвать эту функцию с идентификатором нужной таблицы:

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