一、

通常情況下，DataTables（Datatables是一款具有高階互動功能的jQuery表格外掛）只用來展示PC端Web網頁的大批量資料；但如果你想在移動端使用DataTables的話，也是可以的。因為DataTables能夠滿足移動端表格外掛的最基本的要求——支援下拉載入！

我們先來看一下效果圖，第一張為資料載入前的樣子——表頭為商品、單號等，內容區域被密密的斜線填充著（就好像瀝瀝淅淅的小雨，被風吹斜了腰身）：

第一張為下拉載入資料後的樣子——密密斜織的線條不見了，取而代之的是需要展示的資料：

二、

是不是感覺還不錯？DataTables下拉重新整理的功能怎麼實現呢？

要想使DataTables具有下拉重新整理的功能，我們需要藉助一款外掛——Scroller（滾輪）——一款專門為DataTables量身定做的渲染外掛，允許DataTables在整個螢幕上快速地呈現大批量資料。

我們來看一下實現過程：

第一步，在頁面中新增Scroller外掛的CSS檔案和JavaScript檔案：

<link href="https://cdn.datatables.net/scroller/1.5.1/css/scroller.bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript"
 
 src="https://cdn.datatables.net/scroller/1.5.1/js/dataTables.scroller.min.js"></script>

第二步，在DataTables初始化的時候新增Scroller支援：

$("#myTable").DataTable({
	"processing": false,//是否顯示處理狀態(排序的時候，資料很多耗費時間長的話，也會顯示這個)
    "serverSide": true,// 伺服器端端分頁
    "paging": true,// 表格允許分頁
    "lengthChange": false,//不允許使用者改變表格每頁顯示的記錄數
 

    "info": false,//不顯示錶格的資訊
    "searching": false,//不允許Datatables開啟本地搜尋
    "deferRender" : true,// 控制表格的延遲渲染，可以提高初始化的速度
	"scrollX" : true,// 允許表格橫向滾動
	"stateSave": true,// 儲存狀態 - 在頁面重新載入的時候恢復狀態（頁碼等內容）
	"scrollCollapse" : true,// 當顯示更少的記錄時，允許表格減少高度
	"scrollY":        200,// 行數的累加高度超過200px時允許垂直滾動
    "scroller":       true,// 開啟下拉載入功能
	 "ajax": {
           "url": "otm/order/list?p=self",
           "type": "POST",
       },
	"columnDefs" : [// 定義列
			{
				targets : 0,
				data : "scode",
				title : "商品",
			}, 
			{
				targets : 1,
				"data" : "id",
				title : "單號",
			},
			// 其他列省略
			],
});

三、

Scroller是怎麼實現DataTables的下拉載入呢？

在DataTables初始化的時候，我們可以看到以下4個重要的引數，它們與Scroller息息相關：

$('#myTable').dataTable( {
    ajax:           '/api/data',
    scrollY:        200,
    deferRender:    true,
    scroller:       true
} );

其中scrollY:200定義了垂直方向上允許出現滾動條的高度，也就是說，當顯示的資料行數累加的高度超出200px時，DataTables就會出現垂直滾動條，以便使用者通過滾動條來載入更多的資料。在PC端的Web網頁上，滾動條一般是可見的，而在移動端的Web網頁上，滾動條是預設隱藏的，但可以通過滑動螢幕來替代滾動條的功能；Scroller的下拉重新整理就利用這一點，它在螢幕上繪製一個高度為scrollY指定高度的容器，這個容器給使用者的視覺印象是整個DataTables表格都是可見的；然後，當用戶滾動當前容器時，Scroller就會自動觸發DataTables的分頁功能，從而獲取更多資料。

四、

Scroller具有以下優良的特徵：

• 快速，Scroller的目標就是使DataTables在渲染大型資料集時更快；
• 相容，Scroller能和deferRender（延遲渲染）完美協作，從而獲得更快的速度；
• 方便，Scroller能和stateSave（儲存狀態）整合，從而在頁面過載時儲存之前滾動條的位置。

綜上所述，Scroller是一款優秀的外掛。如果你要在移動端使用DataTables來展示大批量資料時，請了解一下Scroller吧！

相關文章：

DataTables的serverSide（伺服器端分頁）怎麼實現？注，伺服器端是Java程式