我使用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条记录，并且还具有排序&扩展功能工作顺利吗?
显示(渲染)这么多的数据是愚蠢的，这当然会使浏览器冻结。
你需要做的是确保你只显示10-100个项目，并在后端对它们进行排序/过滤。我建议使用https://www.datatables.net/，它有非常直接的后端实现指令。