服务器端的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); 

     }); 
    });