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 しか使用せず、必要に応じてバニラ 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 に答える