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);

});

这部分代码负责在我的页面上创建数据表的循环，它具有类＆＃34; .gerais＆＃34;：

$('.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个表，它只适用于最后一个表。

我已经尝试过转换＆＃34; x＆＃34;在一个阵列上，它没有工作。

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);

        });
    });

服务器端ajax搜索，等到完成输入 - 多表

1 个答案: