여러 데이터 테이블에 대해 스크립트를 실행하는 중

Question

Jade와 bootstrap 및 jQuery DataTables를 사용하여 만든 테이블이 몇 개 있습니다. 개별 열 필터링을 가능하게하는 몇 가지 코드를 포함 시켰습니다. 그러나 함수가 적용되는 것과 동일한 ID로 식별되는 경우에도 첫 번째 테이블에서만 완전히 작동합니다. 다음과 같이 코드는 다음과 같습니다

DataTables의 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

당신은 단지 데이터 테이블에 클래스를 추가했다. 대신에 고유 한 id-attribute를 사용하십시오. datatable1, datatable2와 같습니다.

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