jquery - Jquery Datatables - 如果用户按下 Enter 或搜索框失焦，如何搜索？

Question

我正在尝试在我们的搜索功能中配置数据表以执行以下操作：仅在执行以下操作之一时进行搜索：

• 点击进入
• 领域失去焦点
• 3 或 4 秒没有用户输入

现在，只要有人开始输入，我们的搜索框就会进行过滤。这是我现在拥有的代码

$(document).ready(function() {
    var oTable = $('#personnel-list-table_filter input').dataTable({
        "bPaginate": true,
        "bLengthChange": true,
        "bFilter": true,
        "bSort": true,
        "bInfo": true,
        "bAutoWidth": true
    });

    $('#personnel-list-table_filter input').unbind();
    $('#personnel-list-table_filter input').bind('keyup', function(e) {
        if(e.keyCode == 13) {
            oTable.fnFilter(this.value);   
        }
    });
});

标签： jquerydatatables

Answer 1

有一个可靠的fnSetFilteringDelay插件可以用来设置过滤的延迟：https ://datatables.net/plug-ins/api/fnSetFilteringDelay

jQuery.fn.dataTableExt.oApi.fnSetFilteringDelay = function(oSettings, iDelay) {
    var _that = this;
 
    if (iDelay === undefined) {
        iDelay = 250;
    }
 
    this.each(function(i) {
        if (typeof _that.fnSettings().aanFeatures.f !== 'undefined') {
            $.fn.dataTableExt.iApiIndex = i;
            
            var oTimerId = null,
                sPreviousSearch = null,
                anControl = $('input', _that.fnSettings().aanFeatures.f);
     
            anControl.unbind('keyup search input').on('keyup search input', function() {
                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;
};

默认值为 250 毫秒，但您可以根据自己的喜好进行更改。在你把这个插件放在你原来的 DataTables 脚本之后，你应该可以像这样使用它：

$(function() {
    $('#personnel-list-table').dataTable({
        ...
    }).fnSetFilteringDelay(1000);  // Set the delay to 1s
});