DataGear 數據可視化分析平臺（http://datagear.tech/） 在新發布的5.4.1版本中，內置表格圖表新增了serverSidePaging選項，僅需通過簡單的配置，即可為表格添加服務端分頁、關鍵字查詢、排序功能。

本文以SQL數據集作為數據源，介紹如何制作具有服務端分頁、關鍵字查詢、單列排序功能的數據表格看板。

首選，新建兩個SQL數據集，第一個：分頁查詢數據，用于查詢數據；第二個：分頁查詢總記錄數，用于查詢總記錄數。

分頁查詢數據詳細如下：

SQL：

SELECT*
FROMt_analysis_1
<#if 查詢關鍵字??>
WHERECOL_NAME LIKE '%${查詢關鍵字}%'
</#if>
<#if 排序名??>
ORDER BY ${排序名} ${排序方向}
</#if>
LIMIT ${分頁索引}, ${分頁大小}

參數：

名稱           類型      必填
查詢關鍵字     字符串     否
排序名         字符串     否
排序方向       字符串     否
分頁索引       數值       是
分頁大小       數值       是

分頁查詢總記錄數詳細如下：

SQL：

SELECTCOUNT(*) AS total
FROMt_analysis_1
<#if 查詢關鍵字??>
WHERECOL_NAME LIKE '%${查詢關鍵字}%'
</#if>

參數：

名稱           類型      必填
查詢關鍵字     字符串     否

然后，新建一個分頁查詢表格表格圖表，綁定上述兩個數據集，并把分頁查詢總記錄數數據集的【附件】項設置為是。

分頁查詢表格詳細如下：

圖表類型：基本表格V2
數據集綁定：分頁查詢數據、分頁查詢總記錄數（附件）

然后，編輯其【圖表選項】，通過serverSidePaging選項將其配置為分頁查詢表格，具體內容為：

{lengthMenu: [5, 10, 20],ordering: true,order: [[ 0, 'asc' ]],searching: true,search: { 'return': true },disableSetting: true,serverSidePaging: {param: function(data, chart){chart.dataSetParamValues(0, [data.search.value, (data.order[0] ? data.order[0].name : null),(data.order[0] ? data.order[0].dir : null),data.start, data.length]);chart.dataSetParamValues(1, [data.search.value]);},totalFieldName: "total"}
}

上述配置項詳細說明請參考DataGear官網文檔【dg-chart-options】章節

點擊【保存并展示】按鈕，打開圖表展示頁，服務端分頁表格制作完成！

效果圖如下所示：

官網地址：

http://www.datagear.tech

源碼地址：

GitCode：https://gitcode.com/datageartech/datagear

Gitee：https://gitee.com/datagear/datagear

Github：https://github.com/datageartech/datagear