【发布时间】:2017-06-26 18:13:18
【问题描述】:
我的 jQuery 数据表显示一些数据的时间过长。
查询很简单。在数据库中,无论大小如何,运行相同的查询都会在微秒内返回相同的结果。
这是查询在我的 PHP 脚本中的样子:
<?php
$searchCommodity = $_POST['commodity'];
$select = "SELECT COMM_CODE, KEY_COMM, MOD_DATE, MOD_USER FROM keyTable WHERE KEY_COMM = '$searchCommodity'";
$query = mysqli_query($dbc, $select);
$out = array();
while($row = $query->fetch_assoc())
{
$out[] = $row;
}
echo json_encode($out);
?>
大多数返回的数据少于 1000 条记录。但是有一些返回超过 10K 到 20K 的记录。
这会导致延迟,如果用户使用 Firefox,他们将收到 “网页正在降低您的浏览器速度。您想做什么?”错误消息选择“停止”或“等待”。
回到我的 jQuery,下面是我将参数发送到 PHP 脚本的方式:
$('#commoditySelect').on('change', function()
{
var commodity = $('#commoditySelect').val();
$.post('api/searchKeyComms.php', {commodity:commodity}, function(data)
{
var table = $('#example1').DataTable();
table.clear();
table.search('').draw();
var obj = JSON.parse(data);
obj.forEach(function(item)
{
table.row.add([item.COMM_CODE, item.KEY_COMM, item.MOD_DATE, item.MOD_USER]);
});
table.draw();
});
});
在主 HTML 页面的底部附近,我这样设置数据表:
$('#example1').DataTable({
"dataType": "json",
"iDisplayLength": 25,
"order": [[ 6, "desc" ]],
"scrollY": 550,
"scrollX": true,
"bDestroy": true,
"stateSave": true
});
我可以在上面的任何代码中添加/更改任何可以提高数据表呈现性能的内容吗?
我找到了这个页面:https://datatables.net/forums/discussion/2651/alternative-server-side-php-script
但我没有做任何连接。如上所述,我使用的是一个简单的查询,在数据库中,数据很快返回。
我什至找到了这个页面:rendering large server-side datasets in jquery datatables
但我从该页面获得的唯一信息是数据表不是为大型数据集制作的。 20K 似乎不算太大。
【问题讨论】:
-
所以你想在一个表中显示 10K 到 20K 条记录?使用分页或延迟加载!
-
浏览器的设计目的不是为了显示通常在该表行顶部的大量数据是添加数据的效率最低的方法 - 每次添加一行时,浏览器都必须重新计算整个表。如果您无法重构服务器端分页或无限滚动,最好的办法是在服务器上呈现 html 并进行一次更新
-
@LawrenceCherone - 似乎即使我没有为分页设置数据表,但仍然呈现分页。当返回 20K+ 记录时,我可以看到 928 页,每页 25 页。这就是我被否决的原因吗?
-
@freedomn-m - 我会接受这个答案。谢谢。
-
您实际上是在尝试执行 Datatables 在
data_sources => ajax中构建的内容,但由于您仍在 DOM 上放置 10-20k 行而失败
标签: php jquery mysql datatable