javascript - 数据表服务器端列过滤器搜索延迟

Question

如何使个别列搜索延迟。因此，它会在几秒钟后自动搜索列输入，而不是在按键时搜索。我已经通过互联网阅读了。这是 stackoverflow 上的重复问题 jQuery DataTable column filters with delay search until 3+ characters or enter key但没有人发布解决方案。

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