900 行以上の非常に大きな html テーブルがあります。行をループし、フィルターの値に応じて行を非表示/表示することで、フィルター処理を有効にしました。
これが問題です。500 行以上を非表示/表示すると、ブラウザーがリフローでビジー状態になっている間、ページが完全に応答しなくなります。フィルタリングする前にテーブルを非表示にしたり、テーブルを複製してからテーブルを置き換えたりしようとしましたが、ブラウザーの再描画中に「アニメーション化された」読み込み画像を表示できないため、応答しないという問題が残ります。
ページネーションはオプションではなく、遅延スクロールもできません。
ループは次のとおりです。
var rows = null;
$("#mavis-filters").find("input:checkbox").on("click", function() {
var id, i;
if (!rows) {
rows = document.getElementById("taskOverview").querySelectorAll("tr");
}
id = this.id;
i = rows.length;
while (i--) {
var row = rows[i];
if (row.dataset.project === id) {
row.classList.toggle("row-hidden");
}
}
});