我使用JS&组合AJAX在表中显示14.5k +数据记录。
从数据库中检索的数据是迭代的&amp;与'+ ='连接。在for循环之后,使用<?php
$a=0;
$con=new mysqli("localhost","root","","gcm") or die("Can not connect to database");
$a=0;
while($a<3){
$sql=("create table table". $a ." ( num int, name varchar(50))");
$a++;
$con->query($sql);
}
//$con->query($sql);
$con->close();
?>
可以在点击时对列进行排序。如果显示的记录超过2k,那么排序需要花费一些时间来执行,这种情况似乎会挂起几秒钟然后显示已排序的记录。
除此之外,最后一列中还有一个“+”符号。点击后,我正在添加一行包含文本字段,再次点击它就被删除了。当我点击“+”时,这一行没有生命扩展。我正在使用以下代码添加行。
$('#tableDiv').html(concatString);
当我在Chrome中查看时,行$('.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';
}
}});
需要更长的时间才能执行。分页&amp;延迟加载工作得很好,但我的高权威只想滚动 - 没有页面或动态加载。
如何在表格中显示14.5k记录,并且还具有排序&amp;行扩展功能工作顺利吗?
答案 0 :(得分:1)
显示(渲染)该数据量是愚蠢的,当然它会冻结浏览器。
您需要做的是确保只显示10-100个项目并在后端对其进行排序/过滤。我建议使用https://www.datatables.net/
,它有非常简单的后端实现指令。