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

这仅适用于一张桌子，但是我有3个表，只能在最后一张桌子上工作。

我已经尝试在数组上转换" x"，但它不起作用。

Answer 1

我进行了一些较小的更改，并在两个客户端（Serveride：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);
        });
    });