伺服器端處理

有時候,從 DOM 讀取資料會太慢或太笨重,特別是處理成千上萬或數百萬的資料列時。為了處理這個問題,DataTables 的伺服器端處理功能提供了一種方法,讓伺服器端的資料庫引擎完成所有的「繁重工作」(它們畢竟是針對這種用例進行高度最佳化的!),然後讓這些資訊在使用者的網頁瀏覽器中繪製出來。因此,您可以輕鬆顯示包含數百萬列的表格。

當使用伺服器端處理時,DataTables 會針對頁面上每次資訊的繪製(即,當分頁、排序、搜尋等時)向伺服器發出 Ajax 請求。DataTables 會向伺服器發送一些變數,以允許它執行所需的處理,然後以 DataTables 要求的格式返回資料。

伺服器端處理是透過使用 serverSide 選項啟用,並使用 ajax 進行配置。請參閱以下有關配置選項的更多資訊。

傳送的參數

當使用伺服器端處理向伺服器發出請求時,DataTables 將傳送以下資料,以便讓伺服器知道需要什麼資料

參數名稱 類型 說明
draw 整數 繪製計數器。DataTables 使用它來確保來自伺服器端處理請求的 Ajax 返回由 DataTables 按順序繪製(Ajax 請求是異步的,因此可能會返回亂序)。它用作 draw 返回參數的一部分(請參閱下文)。
start 整數 分頁第一個記錄指示器。這是目前資料集中的起點(基於 0 的索引 - 即 0 是第一個記錄)。
length 整數 表格在目前繪製中可以顯示的記錄數。預期返回的記錄數將等於此數字,除非伺服器要返回的記錄較少。請注意,這可以是 -1,表示應返回所有記錄(儘管這會抵消伺服器端處理的任何優勢!)
search[value] 字串 全域搜尋值。要應用於所有 searchabletrue 的欄位。
search[regex] 布林值 如果全域篩選應被視為用於進階搜尋的正規表示式,則為 true,否則為 false。請注意,通常伺服器端處理腳本不會由於大型資料集的效能原因而執行正規表示式搜尋,但這在技術上是可行的,並且由您的腳本決定。
order[i][column] 整數 應該應用排序的欄位。這是對也提交到伺服器的資訊 columns 陣列的索引參考。
order[i][dir] 字串 此欄位的排序方向。它將為 ascdesc,分別表示升序排序或降序排序。
columns[i][data] 字串 欄位的資料來源,由 columns.data 定義。
columns[i][name] 字串 欄位的名稱,由 columns.name 定義。
columns[i][searchable] 布林值 指示此欄位是否可搜尋 (true) 或不可搜尋 (false) 的旗標。這由 columns.searchable 控制。
columns[i][orderable] 布林值 指示此欄位是否可排序 (true) 或不可排序 (false) 的旗標。這由 columns.orderable 控制。
columns[i][search][value] 字串 要應用於此特定欄位的搜尋值。
columns[i][search][regex] 布林值 指示此欄位的搜尋詞是否應被視為正規表示式 (true) 或不應被視為正規表示式 (false) 的旗標。與全域搜尋一樣,通常伺服器端處理腳本不會由於大型資料集的效能原因而執行正規表示式搜尋,但這在技術上是可行的,並且由您的腳本決定。

傳送到伺服器的 order[i]columns[i] 參數是資訊陣列

  • order[i] - 是一個陣列,定義在多少個欄位上進行排序 - 即如果陣列長度為 1,則執行單欄排序,否則執行多欄排序。
  • columns[i] - 一個陣列,定義表格中的所有欄位。

在這兩種情況下,i 都是一個整數,它將更改以指示陣列值。在大多數現代伺服器端腳本環境中,此資料會自動以陣列形式提供給您。

返回的資料

一旦 DataTables 請求資料,並將上述參數傳送到伺服器,它會期望返回 JSON 資料,並設定以下參數

參數名稱 類型 說明
draw 整數 此物件回應的繪製計數器 - 來自作為資料請求一部分傳送的 draw 參數。請注意,強烈建議出於安全性原因,您應該將此參數轉換為整數,而不是簡單地將其傳送的 draw 參數回顯到客戶端,以防止跨網站指令碼 (XSS) 攻擊。
recordsTotal 整數 篩選前的總記錄數(即資料庫中的總記錄數)
recordsFiltered 整數 篩選後的總記錄數(即應用篩選後記錄的總數 - 不僅僅是為此頁面返回的資料記錄數)。
data 陣列 要在表格中顯示的資料。這是一個資料來源物件的陣列,每個資料列一個,DataTables 將使用它。請注意,可以使用 ajax 選項的 dataSrc 屬性來更改此參數的名稱。
error 字串 可選:如果在執行伺服器端處理腳本期間發生錯誤,您可以透過傳回要使用此參數顯示的錯誤訊息來通知使用者。如果沒有錯誤,請不要包含。

除了控制整體表格的上述參數之外,DataTables 還可以使用每個個別資料列的資料來源物件上的以下可選參數來為您執行自動操作

參數名稱 類型 說明
DT_RowId 字串 tr 節點的 ID 屬性設定為此值
DT_RowClass 字串 將此類別新增至 tr 節點
DT_RowData 物件 使用 jQuery data() 方法將物件中包含的資料新增至資料列以設定資料,然後也可以用於稍後的檢索(例如在點擊事件時)。
DT_RowAttr 物件 將物件中包含的資料作為屬性新增至資料列 tr 節點。物件鍵用作屬性鍵,值用作相應的屬性值。這是使用 jQuery param() 方法執行的。請注意,此選項需要 DataTables 1.10.5 或更新版本。

下面的「範例資料」部分顯示了如何使用這些選項來呈現回傳資料的範例。

配置

DataTables 中的伺服器端處理是透過使用 serverSide 選項啟用的。只需將其設定為 true,DataTables 將在伺服器端處理模式下運作。您還需要使用 ajax 選項來指定 DataTables 應從哪裡取得其 Ajax 資料的 URL。因此,最簡單的伺服器端處理初始化是

$('#example').DataTable( {
    serverSide: true,
    ajax: '/data-source'
} );

DataTables 如何發出 Ajax 請求的配置是透過 ajax 選項配置的。在上面的範例中,我們將其用作字串,它指示 DataTables 使用其預設設定來發出 Ajax 請求。但是,您可以透過將 ajax 作為物件傳遞來客製化這些設定。作為物件,ajax 直接對應到 jQuery ajax 配置物件,因此您可以在 jQuery 請求中使用的任何選項,也可以在 DataTables 中使用!例如,要發出 POST 請求

$('#example').DataTable( {
    serverSide: true,
    ajax: {
        url: '/data-source',
        type: 'POST'
    }
} );

有關 DataTables 中可用的 Ajax 選項的更多資訊,請參閱 ajax 文件。

舊版

較舊版本的 DataTables (1.9-) 使用不同的參數集來從伺服器傳送和接收。因此,為 DataTables 1.10+ 撰寫的腳本將無法與 DataTables 1.9- 一起運作。但是,DataTables 1.10 對於為 1.9- 撰寫的腳本具有相容性模式。此相容性模式是由於使用舊的 sAjaxSource 參數(而不是新的 ajax 參數)或透過設定 $.fn.dataTable.ext.legacy.ajax = true; 觸發的。

有關執行伺服器端處理的 1.9- 方法的文件,請參閱 舊版文件

範例資料

使用陣列作為表格資料來源的伺服器端處理返回的範例 (完整範例)

{
    "draw": 1,
    "recordsTotal": 57,
    "recordsFiltered": 57,
    "data": [
        [
            "Angelica",
            "Ramos",
            "System Architect",
            "London",
            "9th Oct 09",
            "$2,875"
        ],
        [
            "Ashton",
            "Cox",
            "Technical Author",
            "San Francisco",
            "12th Jan 09",
            "$4,800"
        ],
        ...
    ]
}

伺服器端處理使用物件回傳的範例,其中也包含了 DT_RowIdDT_RowData,作為表格的資料來源(完整範例

{
    "draw": 1,
    "recordsTotal": 57,
    "recordsFiltered": 57,
    "data": [
        {
            "DT_RowId": "row_3",
            "DT_RowData": {
                "pkey": 3
            },
            "first_name": "Angelica",
            "last_name": "Ramos",
            "position": "System Architect",
            "office": "London",
            "start_date": "9th Oct 09",
            "salary": "$2,875"
        },
        {
            "DT_RowId": "row_17",
            "DT_RowData": {
                "pkey": 17
            },
            "first_name": "Ashton",
            "last_name": "Cox",
            "position": "Technical Author",
            "office": "San Francisco",
            "start_date": "12th Jan 09",
            "salary": "$4,800"
        },
        ...
    ]
}

如需探索伺服器端處理可用選項的完整範例集,請參閱本網站的範例區塊