Question

我正在使用DataTables 1.10.19。我的要求是提供基于复选框选择的搜索操作。即我是否选中了员工姓名复选框，那么搜索将仅应用于员工姓名。如果我选择位置复选框，则搜索将适用于员工姓名和位置字段。另外，我没有向用户显示这些列。搜索在隐藏的列上完成。一切都按预期工作，但是现在我有2000多个条目，现在性能出现问题。有时浏览器也会挂起。除了基于ajax的搜索，还有其他解决方案吗？我的代码如下。

var checkbox_column = {
    //checkbox value to datatable column index
    empname : 2,
    jobtitle : 3,
    location : 4
};

$.fn.dataTableExt.afnFiltering.push(function(oSettings, aData, iDataIndex) {
var filter_val = $('.datatable-search-box:visible').val().trim().toLowerCase();

if (filter_val == '') {
    //no value is inserted
    return true;
}

//apply filter only if checkboxes are selected
if ($('.dt_filter_checkbox:visible:checked').length) {
    var columns_match = [];
    $('.dt_filter_checkbox:visible:checked').each(function(){
        columns_match.push(checkbox_column[$(this).val()]);
    });

    if (columns_match.length) {
        var text_compared = false;
        for (i in columns_match) {
            text_compared = (aData[columns_match[i]].toLowerCase().indexOf(filter_val) !== -1);
            if (text_compared) {
                break;
            }
        }
        //no match found for the data
        if (!text_compared) {
            return false;
        }
    } else {
        return false;
    }
} else {
    return false;
}
    return true;
});

用于应用数据表和自定义过滤器的代码

var data_table = $("#table-employees").dataTable({
    language: {
        search: '',
        searchPlaceholder:'Search',
        sInfo : "<span class='actual_text'>Showing _END_ of _MAX_ records</span>",
        sInfoFiltered : "<span class='filtered_text'>Showing _TOTAL_ of total records</span>",
        sInfoEmpty : "<span class='empty_text'>Showing 0 to 0 of 0 entries</span>",
    },
    'columnDefs': [
        {
            'targets': [0],
            'orderable': false,
        },
        {
            "targets": [2,3,4],
            "visible": false
        }
    ],
    'order': [ 1, 'asc'],
    drawCallback: function(){
        $("img.emp_image").lazyload();
    },
    fnDrawCallback: function() {
        //removing header
        $("#table-employees thead").remove();
    },
    bLengthChange : false,
    "pageLength":   200,
    dom:
    "<'row be-datatable-body'<'col-12'tr>>" +
    "<'row be-datatable-footer'<'pb-3 pb-sm-0 col-auto col-md-auto col-lg-6'i><'col-auto col-md-auto col-lg-6'p>>"
}).on('search.dt',function(){
    setTimeout(function(){
        if ($('.filtered_text').length) {
            $('.actual_text').hide();
            $('.empty_text').hide();
        } else {
            $('.actual_text').show();
        }
    },10);
});

$('.datatable-search-box.all').keyup(function() {
    data_table.fnDraw();
});

$(document).on('change','.dt_filter_checkbox', function(){
    data_table.fnDraw();
});

编辑

使用默认的搜索功能，不会影响性能。

JQuery Datatable自定义搜索功能上的慢速搜索

0 个答案: