javascript - 服务器端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

我做了一些小的更改，并在两个客户端 (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);

        });
    });