Question

我有一个应用程序，它在表格中显示了一个客户列表。此表中有485行。在thead中有一个文本框，允许用户过滤在文本框出现的列中输入的值。似乎每当用户在其中一个字段中输入一个字母时，Firefox就会显示有关脚本没有响应的提示。

在任何人建议之前，分页不是一个选项 - 想法是它显示完整的客户列表，然后用户过滤特定列中的某个值。

目前我正在使用以下方法过滤每一列：

$inputs.keyup(function() {
    $header = $(this).closest("th").attr("data-header-name");
    $table = $(this).closest("table").find("tbody");
    $rows = $table.find("tr");
    $rows.not(":visible").show(0);
    $input = $(this);
    if(!($.trim($input.val())) == "") {
         $rows.filter(function(i) {
             return ($(this).find("td").filter(function() {
                 return ($(this).attr("headers") == $header)
             }).html().toLowerCase().indexOf($input.val().toLowerCase()) == -1);
         }).hide(0);
    }
});

有没有人对如何改进这一点有任何想法，以便更快？提前谢谢。

JS Fiddle

此致理查德

Answer 1

只是把它放在一起，并没有立即考虑多个过滤器，但应该给你一些如何优化的想法。它只使用一个小jQuery，你可以很容易地用香草JS替换它，如果你想的话。

请注意，我为每次击键添加了500毫秒的延迟以防止超限，这可能会被调整或者可能更好地编写，但这在过去对我有用。此外，您可以通过预先构建查找表来获得性能，而不是在搜索操作期间为任何事情调用jQuery。

var timeout = 0,
    columns = {};

function doFilter(that) {
    var column = columns[that.column],
        filter = that.value.toUpperCase(),
        i = column.length - 1;

    // look for our value hide row if not found
    while (i > -1) {
        var display = 'none'
        if (column[i].text.indexOf(filter) > -1) {
            display = '';
        }

        column[i].el.parentNode.style.display = display;
        i--;
    }
}


/* shouldn't have to change this stuff */

$('input').each(function () {

    //Setup our columns
    var index = $(this).parent().prevAll().length + 1;

    this.column = index;
    columns[index] = [];

    // attach some data to each column
    $('td:nth-child(' + index + ')').each(function () {
        columns[index].push({
            text: this.innerHTML.toUpperCase(),
            el: this
        });
    });

}).on('keyup', function () {
    //bind our event with a 500 ms delay
    var that = this;
    clearTimeout(timeout);
    timeout = setTimeout(function () {
        doFilter(that);
    }, 500);
});

演示：http://jsfiddle.net/jeff_mccoy/HDpr7/8/embedded/result/

表数据来自datatables.net（只是html）。希望有所帮助。

jQuery列过滤器

1 个答案: