數據表 - 預加載數據的第一頁，而完整數據集加載

我要找的人從一些建議誰以前做過類似的：我使用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

數據表 - 預加載數據的第一頁，而完整數據集加載

回答

相關問題