javascript - 在表中显示 14.5k+ 条记录挂起网页

Question

我使用 JS 和 AJAX 的组合来显示表中 14.5k+ 条数据。

从数据库检索的数据被迭代并用“+=”连接。在 for 循环之后，使用 $('#tableDiv').html(concatString); 将字符串添加到表中

点击即可对列进行排序。如果显示超过 2k 条记录，则排序需要时间来执行，在这种情况下，它似乎会挂起几秒钟，然后显示排序的记录。

除此之外，最后一列还有一个“+”号。单击时，我添加了一行带有文本字段的行，再次单击时它被删除。当我单击“+”时，该行展开没有生命力。我使用以下代码来添加行。

$('.plusToggle').live("click", function() {
var row = $(this).closest("tr");
currentSection =id.split('&Id=')[0];
insertRow = "<tr id='notes,"+currentSection+"'><td class='col-md-1 text-center' >
<div class='form-group notes'>"
+ "<input class='form-control Summary' type='text' id='Summary,"+currentSection+"' placeholder='Summary' /><br/>"
+ "<textarea class='form-control Notes' rows='5' id='Notes,"+currentSection+"' ></textarea>"
+ "</div></td></tr>";
if(currentSection != previousSection) {
$(insertRow).insertAfter(row).hide();
$('#notes,'+currentSection).show("blind");
document.getElementById('Summary,'+currentSection).focus();
$('#notes,'+previousSection).hide(1000);
notesClicked = '';
$("#notes,"+previousSection).remove();
} else {
if(notesClicked) {
$(insertRow).insertAfter(row).hide();
$('#notes,'+currentSection).show("blind");
document.getElementById('Summary,'+currentSection).focus();
notesClicked = '';
} else {
$('#notes,'+currentSection).hide("blind");
notesClicked = 'TRUE';
}
}});

当我在 Chrome 中检查时，行 .show("blind")需要更长的时间来执行。分页和延迟加载效果很好，但我的高层只想滚动 - 没有页面或动态加载。

如何在表格中显示 14.5k 条记录，同时让排序和行展开功能顺利工作？

Answer 1

显示(渲染)那么多数据是愚蠢的，当然它会卡住浏览器。

您需要做的是确保仅显示 10-100 个项目并在后端对它们进行排序/过滤。我建议使用 https://www.datatables.net/ ，它有非常简单的后端实现说明。