数据表 - 预加载数据的第一页，而完整数据集加载

我要找的人从一些建议谁以前做过类似的：我使用datatables.js显示全表大约10,000行数据表 - 预加载数据的第一页，而完整数据集加载

，所以它加载缓慢（5-7秒），并给出“脚本没有响应”弹出窗口 - 不是一个好的用户体验

我想要加载全套数据以使用内置的搜索过滤器以及作为一些自定义过滤器，所以ajax抓取分页，过滤器等数据是不可取的。（我们喜欢爽，一旦数据被加载过滤可能是相当激烈的）

我已经做了一些尝试&想，也许：

- 只有少数记录加载的第一页 - - 同时，在页面加载时执行背景ajax调用以构建第二个完整表格 - 最后，当数据存在时，用ajax构建的表格替换inital表格 - prolly需要重新绑定一些东西

在花费所有设置和检查所需的时间之前，有没有人以前做过或可以提供差异建议？

TIA，

杰夫

来源

2013-02-27 jmadsen

恐怕数据表不出货，这将不会是这样与您请求的功能。根据我的经验，当数据集很大（3000+）时，页面加载会非常缓慢。你可以尝试[服务器端处理]（http://datatables.net/release-datatables/examples/data_sources/server_side.html），它可以很好地调节性能。 – yuwang 2013-05-23 18:09:42

由于@yuwang说，这是数据表是如何工作的。我们自己也对此感到困惑 - 问题在于DataTable在初始化方面速度非常慢，大约4000条记录似乎成为大多数浏览器的障碍。在我们的应用程序中，我只设置了4000个限制 - DataTables视图主要是为了方便，人们可以进行更窄范围的搜索。 Serverside处理不是真正的解决方案。

关于“负荷只有少数记录的第一页 - 在同一时间，做页面加载背景Ajax调用兴建第二座全表”，试试这个：

服务器。 PHP，与brief=yes调用如果只有前100条记录应加载

<table id="test-table"> 
<thead> 
    <th>id</th> 
    <th>date</th> 
    <th>text</th> 
</thead> 
<tbody> 
<? 
function getColumn() { 
    $row='<tr>'; 
    $row.='<td>'.rand(1, 100000).'</td>'; 
    $row.='<td>'.date("Y-m-d H:i:s", mt_rand(1232055681, 1762855681)).'</td>'; 
    $row.='<td>'.str_shuffle('abcdefghijklmnopqr').'</td>'; 
    $row.='</tr>'; 
    return $row; 
} 
$count=(isset($_GET['brief'])) ? 100 : 10000; 
for ($i=0;$i<$count;$i++) { 
    echo getColumn(); 
} 
?> 
</tbody> 
</table>

完全正常的例子（复制和粘贴）

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script> 
    <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"> 
    <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script> 
<script> 
$(document).ready(function() { 
    $.ajax({ 
     url: 'server.php?brief=yes', 
     success : function(html) { 
      $('#table-container').html(html); 
      $("#test-table").DataTable(); 
      $.ajax({ 
       url: 'server.php', 
       success : function(html) { 
        $('#table-container').html(html); 
        $("#test-table").DataTable(); 
       } 
      }); 
     } 
    }); 
}); 
</script> 
</head> 
<body> 
    <div id="table-container"></div> 
</body> 
</html>

关当然，在server.php的记录总是变化的内容，当你从数据库加载记录（或其他）

来源

2013-06-12 10:26:07 davidkonrad

数据表 - 预加载数据的第一页，而完整数据集加载

回答

相关问题