1

我有一个应用程序，它在表格中显示客户列表。此表中有 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小提琴

问候，理查德

4

1 回答 1

1

只是把它放在一起，它不会同时考虑多个过滤器，但应该给你一些关于如何优化的想法。它只使用了一点 jQuery，如果你愿意，你可以很容易地用 vanilla 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）。希望有帮助。

于 2012-06-22T22:46:42.233 回答