不要一次進來那麼大的－DataTables之ServerSide（伺服器處理）屬性筆記

發表於 | 分類於 |
DataTables之ServerSide屬性筆記。
最後修改日期｜Jul 07, 2020

DowYuu言

DataTables在加載ajax數據時，會是一次撈回所有的資料，對於巨量資料而言效能上並不優，因此有了ServerSide屬性。

ServerSide用法

用法很簡單，設置ServerSide為true（預設為false），並設置ajax屬性即可，因會去及時撈資料，通常會搭配"processing": true（顯示等待中）增加使用者體驗。

1
2
3
4
5
6
7
$(function(){
  $('#example').DataTable({
    "processing": true,
    "serverSide": true,
    "ajax": "scripts/getData.php"
  });
});

設置後會使得各種操作像是「切換頁」、「選擇每頁資料數」、「排序」、「查詢」…等等，都會再一次以ajax去後端撈資料回來顯示，對巨量資料而言是較佳的做法。

更多屬性設置可以看官方ServerSide說明。

前端延遲渲染

另外提供另一種延遲選擇－deferRender，此種方式是讓ajax一次撈回所有資料，並且在要顯示時才將HTML元素建立出來，同樣可以提升巨量資料使用Datatables上的效能。

詳細可以參考DataTables之deferRender（延遲渲染）屬性筆記。

完畢灑花<3