数据表服务器端列筛选器搜索延迟

Question

如何使单个列搜索延迟。因此，它会在几秒钟后自动搜索列输入，而不是按下键。我在网上看过。以下是关于stackoverflow jQuery DataTable列过滤器的重复问题，延迟搜索直到3+字符或输入键，但没有人发布解决方案。

jQuery.fn.dataTableExt.oApi.fnSetFilteringDelay = function ( oSettings, iDelay ) {
        var _that = this;
        if ( iDelay === undefined ) {
            iDelay = 500;
        }
        this.each( function ( i ) {
            $.fn.dataTableExt.iApiIndex = i;
            var
                $this = this,
                oTimerId = null,
                sPreviousSearch = null,
                anControl = $( 'input', _that.fnSettings().aanFeatures.f );
                anControl.unbind( 'keyup search input' ).bind( 'keyup', function() {
                var $$this = $this;
                if (sPreviousSearch === null || sPreviousSearch != anControl.val()) {
                    window.clearTimeout(oTimerId);
                    sPreviousSearch = anControl.val();
                    oTimerId = window.setTimeout(function() {
                        $.fn.dataTableExt.iApiIndex = i;
                        _that.fnFilter( anControl.val() );
                    }, iDelay);
                }
            });
            return this;
        } );
        return this;
    };

上面的代码

表示全局搜索延迟。有人可以提供解决方案，延迟对单个列过滤器字段的搜索?

Answer 1

我找不到一个简单的解决方案，也不想使用插件，所以我用几行JavaScript解决了这个问题。我基本上首先延迟AJAX调用，然后在调用它之前，我检查在延迟期间是否有任何键被按下。如果是，则不执行AJAX调用。如果没有，则执行AJAX调用。下面是我的代码片段:

var start = new Date();
table.columns().every( function () {
    var first = this;
    $( 'input', this.header() ).on( 'keyup change', function () {
        start=new Date(); 
        var second = this;
        if ( first.search() !== this.value ) {
            setTimeout(function(){if ((new Date() - start)>250) {first.search( second.value ).draw();}}, 250);
        }
    } );
} );

Answer 2

用于数据表的yadcf插件提供了开箱使用的功能+它有10种不同的过滤器类型

它被称为filter_delay，你可以看到它的作用yadcf -服务器端源示例

p。我是yadcf

Answer 3

如果您使用的是DataTables 1.10.3+，则可以使用文档中列出的throttle util函数:

https://datatables.net/reference/api/%24.fn.dataTable.util.throttle ()

对于我的需要，我有一个表，列2-5与头搜索输入，需要节流，所以我一直使用:

const searchColumns = [1,2,3,4];
dataTable.columns(searchColumns).every(function (i) {
    let throttledSearch = $.fn.dataTable.util.throttle(
        function () {
            dataTable
                .column(i)
                .search(this.value)
                .draw();
        },
        2000
    );
    $('input', dataTable.column(i).header()).on('keyup change clear', throttledSearch);
});

这将阻止ajax在最后一次更改后2秒内触发。论坛上还有一个来自Allan的例子，在这里给出了一个很好的例子:

https://www.datatables.net/forums/discussion/27496/fn-datatable-util-throttle-not-throttling-search-server-side

Answer 4

我想到的过滤列而不是主要搜索的最佳解决方案是

 // Filter event handler
var delayTimer;
var delayTime = 500;
$(table.table().container()).on('keyup', 'thead input:not(:checkbox)', function () {
    clearTimeout(delayTimer);
    var that = this;
    delayTimer = setTimeout(function () {
        table
            .column($(that).data('index'))
            .search(that.value)
            .draw();
    }, delayTime);
    
});

我使用了clearartimeout (delayTimer);清除之前的搜索，以便用户可以继续输入而不受任何干扰