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

7kjnsjlb  于 2023-05-22  发布在  jQuery
关注(0)|答案(4)|浏览(156)

我如何使个别栏目搜索延迟。因此,它会自动搜索列输入后,几秒钟的,而不是按下键。我在网上看过。这是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;
    };

上面的代码用于全局搜索延迟。有人可以提供解决方案,延迟搜索个别列过滤器字段?

k10s72fa

k10s72fa1#

我找不到一个简单的解决方案,也不想使用插件,所以我用几行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);
        }
    } );
} );
zpgglvta

zpgglvta2#

数据表的yadcf插件提供了这个开箱即用+它有10种不同的过滤器类型
它的名称为filter_delay,您可以在操作yadcf - Server side source example中看到它
我是yadcf的作者

vlf7wbxs

vlf7wbxs3#

如果您使用的是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);
});

这将在最后一次更改后的2秒内停止 AJAX 触发。论坛上还有一个来自Allan的例子,在这里给出了一个很好的例子:
https://www.datatables.net/forums/discussion/27496/fn-datatable-util-throttle-not-throttling-search-server-side

6pp0gazn

6pp0gazn4#

最好的解决方案,我想出了过滤栏不是主要的搜索是

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

我使用了clearTimeout(delayTimer);清除上一次搜索,以便用户可以继续键入而不受任何中断

相关问题