服務器端的AJAX搜索，等到完成輸入 - 多表

Question

我有以下代碼：

$('.gerais').each(function(){ 
    var daotable = $(this).data('dao'); 
    x = $(this).DataTable({ 
     serverSide: true, 
     ajax: { 
      url: $('body').data('url')+'gerais/ajax_list/'+daotable, 
      type: "POST" 
     }, 
     buttons: {    
      dom: { 
       button: { 
        className: 'btn btn-default' 
       } 
      }, 
      buttons: [ 
       { 
        extend: 'copyHtml5', 
        text: "<i class=' icon-copy3'></i> Copiar" 
       }, 
       { 
        extend: 'excelHtml5', 
        text: "<i class=' icon-file-excel'></i> Excel" 
       }, 
       { 
        extend: 'pdfHtml5', 
        text: "<i class=' icon-file-pdf'></i> PDF" 
       }, 
       { 
        extend: 'print', 
        text: '<i class="icon-printer"></i> Imprimir' 
       } 
      ], 
     } 
    }); 

}); 
$('.dataTables_filter input[type=search]').attr('placeholder','Pesquisar...') 
.unbind() 
.bind('input', function(e){ 
    var item = $(this); 
    searchWait = 0; 
    if(!searchWaitInterval) searchWaitInterval = setInterval(function(){ 
     if(searchWait >= 3){ 
      clearInterval(searchWaitInterval); 
      searchWaitInterval = ''; 
      searchTerm = $(item).val(); 
      x[z].search(searchTerm).draw(); // change to new api 
      searchWait = 0; 
     } 
     searchWait++; 
    },200); 

}); 

的這部分代碼負責，創造我的頁面上的數據表中的循環，即有類 「.gerais」：

$('.gerais').each(function(){ 
    var daotable = $(this).data('dao'); 
    x = $(this).DataTable({ 
     serverSide: true, 
     ajax: { 
      url: $('body').data('url')+'gerais/ajax_list/'+daotable, 
      type: "POST" 
     }, 
     buttons: {    
      dom: { 
       button: { 
        className: 'btn btn-default' 
       } 
      }, 
      buttons: [ 
       { 
        extend: 'copyHtml5', 
        text: "<i class=' icon-copy3'></i> Copiar" 
       }, 
       { 
        extend: 'excelHtml5', 
        text: "<i class=' icon-file-excel'></i> Excel" 
       }, 
       { 
        extend: 'pdfHtml5', 
        text: "<i class=' icon-file-pdf'></i> PDF" 
       }, 
       { 
        extend: 'print', 
        text: '<i class="icon-printer"></i> Imprimir' 
       } 
      ], 
     } 
    }); 

}); 

而這一次是通過在搜索延遲

$('.dataTables_filter input[type=search]').attr('placeholder','Pesquisar...') 
.unbind() 
.bind('input', function(e){ 
    var item = $(this); 
    searchWait = 0; 
    if(!searchWaitInterval) searchWaitInterval = setInterval(function(){ 
     if(searchWait >= 3){ 
      clearInterval(searchWaitInterval); 
      searchWaitInterval = ''; 
      searchTerm = $(item).val(); 
      x[z].search(searchTerm).draw(); // change to new api 
      searchWait = 0; 
     } 
     searchWait++; 
    },200); 

}); 

這工作WEL負責l只有一張桌子，但我有3張桌子，只能在最後一張桌子上。

我已經嘗試在數組上轉換「x」，但它不起作用。

Answer 1

我做了一些小的改動，並在兩個客戶端（serverSide：false）表中進行了測試。

 $(function() { 
      $("#tabs").tabs(); 
      $('#tblTab1').DataTable(); 
      $('#tblTab2').DataTable(); 

       // definded global variable. 
       var searchWaitInterval = null; 
      $('.dataTables_filter input[type=search]').attr('placeholder', 'Pesquisar...') 
       .off() 
       .on('input', function (e) { 
        var item = $(this); 
        var searchWait = 0; 
        if (!searchWaitInterval) searchWaitInterval = setInterval(function() { 
         if (searchWait >= 3) { 
         clearInterval(searchWaitInterval); 
         searchWaitInterval = null; 
         searchTerm = $(item).val(); 
          // aria-controls is an attribute added by DataTables so it makes it easy to target the right 
          // tables without resorting to global variables. 
          $("#" + item.attr("aria-controls")).DataTable().search(searchTerm).draw(); // change to new api 
          searchWait = 0; 
       } 
       searchWait++; 
      }, 200); 

     }); 
    });