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

时间:2015-08-04 18:17:21

标签: javascript jquery ajax string-concatenation

我使用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;行扩展功能工作顺利吗?

1 个答案:

答案 0 :(得分:1)

显示(渲染)该数据量是愚蠢的,当然它会冻结浏览器。

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