這將純粹關(guān)注“服務(wù)器端”解決方案的 DataTables 方面。如何編寫(xiě)支持它所需的服務(wù)器端邏輯超出了此答案的范圍。但我希望這些說(shuō)明至少能夠闡明該邏輯需要是什么，以及您可以如何處理它。
假設(shè)
假設(shè)您有一個(gè)文本文件，其中包含 1,000 行這樣的數(shù)據(jù)（或一百萬(wàn)行 - 但太多行無(wú)法同時(shí)發(fā)送到瀏覽器和 DataTables）。文本文件是一個(gè)簡(jiǎn)單的管道分隔文件，包含三個(gè)字段：
id|name|description
1|widget_1|This is a description for widget 1
2|widget_2|This is a description for widget 2
3|widget_3|This is a description for widget 3
...
1000|widget_1000|This is a description for widget 1000
您希望使用服務(wù)器端處理一次將 10 個(gè)項(xiàng)目發(fā)送到 DataTables。
您的數(shù)據(jù)映射到一個(gè)簡(jiǎn)單的 JSON 結(jié)構(gòu)，就像這樣 - 一組對(duì)象（每個(gè)對(duì)象是一個(gè)記錄）：
[
{
"id": 1,
"name": "widget_1",
"description": "This is a description for widget 1"
},
{
"id": 2,
"name": "widget_2",
"description": "This is a description for widget 2"
},
... // more records...
]
數(shù)據(jù)表定義
您的數(shù)據(jù)表定義看起來(lái)像這樣 - 在這個(gè)階段它故意非常簡(jiǎn)單：
<body>
<div style="margin: 20px;">
<table id="demo" class="display dataTable cell-border" style="width:100%">
</table>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#demo').DataTable({
serverSide: true,
ajax: {
url: 'http://localhost:7000/data',
type: 'POST'
},
columns: [
{ title: 'ID',
data: 'id' },
{ title: 'Name',
data: 'name' },
{ title: 'Description',
data: 'description' }
]
});
});
</script>
</body>
初步反應(yīng)
當(dāng)網(wǎng)頁(yè)首次顯示時(shí)，它會(huì)向 URL ( http://localhost:7000/data ) 發(fā)送一個(gè)初始 POST 請(qǐng)求，并期望從 Web 服務(wù)器接收 JSON 響應(yīng)，其中包含要顯示的數(shù)據(jù).
由于 DataTables 正在使用serverSide: true，因此 DataTables 將期望 JSON 具有特定的結(jié)構(gòu)，如此處所述。
具體來(lái)說(shuō)，服務(wù)器必須將所有必填字段（draw、recordsTotal、recordsFiltered和data）添加到它發(fā)送到 DataTables 的 JSON 中。
在我們的例子中，它看起來(lái)像這樣 - 請(qǐng)注意，它只是我們之前提到的 JSON 結(jié)構(gòu)，添加了一些額外的元數(shù)據(jù)字段：
{
"draw": 1,
"recordsTotal": 1000,
"recordsFiltered": 1000,
"data": [{
"id": 1,
"name": "widget_1",
"description": "This is a description for widget 1"
}, {
"id": 2,
"name": "widget_2",
"description": "This is a description for widget 2"
}, {
"id": 3,
"name": "widget_3",
"description": "This is a description for widget 3"
}, {
"id": 4,
"name": "widget_4",
"description": "This is a description for widget 4"
}, {
"id": 5,
"name": "widget_5",
"description": "This is a description for widget 5"
}, {
"id": 6,
"name": "widget_6",
"description": "This is a description for widget 6"
}, {
"id": 7,
"name": "widget_7",
"description": "This is a description for widget 7"
}, {
"id": 8,
"name": "widget_8",
"description": "This is a description for widget 8"
}, {
"id": 9,
"name": "widget_9",
"description": "This is a description for widget 9"
}, {
"id": 10,
"name": "widget_10",
"description": "This is a description for widget 10"
}]
}
服務(wù)器負(fù)責(zé)構(gòu)建此 JSON - 服務(wù)器數(shù)據(jù)集的前 10 條記錄。服務(wù)器還告訴 DataTables 它總共有 1,000 條記錄，并且它還沒(méi)有過(guò)濾掉任何數(shù)據(jù)（還） - 因此過(guò)濾后總共還有 1,000 條記錄。
DataTables 需要所有這些信息，所以它知道要顯示多少個(gè)分頁(yè)按鈕，以及要顯示哪些分頁(yè)數(shù)據(jù)。
請(qǐng)注意，完成所有這些工作完全是服務(wù)器的責(zé)任——這就是它被稱為“服務(wù)器端”處理的原因。
客戶端（瀏覽器）只有 10 條記錄要呈現(xiàn) - 所以很快就會(huì)發(fā)生。
（我剛剛注意到屏幕截圖提到了“500 條記錄”——這是我的服務(wù)器端代碼中的一個(gè)錯(cuò)誤——沒(méi)有過(guò)濾器，所以我需要修復(fù)它）。
后續(xù)請(qǐng)求
當(dāng)用戶單擊頁(yè)面導(dǎo)航按鈕（例如頁(yè)面“4”）時(shí)，會(huì)觸發(fā)從 DataTables 到服務(wù)器的新請(qǐng)求。DataTables 使用此處描述的字段自動(dòng)構(gòu)建此請(qǐng)求。
請(qǐng)求作為表單數(shù)據(jù)發(fā)送。
在我們的示例中，請(qǐng)求如下所示：
"Form data": {
"draw": "5",
"columns[0][data]": "id",
"columns[0][name]": "",
"columns[0][searchable]": "true",
"columns[0][orderable]": "true",
"columns[0][search][value]": "",
"columns[0][search][regex]": "false",
"columns[1][data]": "name",
"columns[1][name]": "",
"columns[1][searchable]": "true",
"columns[1][orderable]": "true",
"columns[1][search][value]": "",
"columns[1][search][regex]": "false",
"columns[2][data]": "description",
"columns[2][name]": "",
"columns[2][searchable]": "true",
"columns[2][orderable]": "true",
"columns[2][search][value]": "",
"columns[2][search][regex]": "false",
"order[0][column]": "1",
"order[0][dir]": "asc",
"start": "30",
"length": "10",
"search[value]": "",
"search[regex]": "false"
}
這些字段告訴服務(wù)器它需要知道的一切，因此它可以準(zhǔn)備正確的響應(yīng)。
在我們的例子中，最重要的字段是：
"start": "30",
"length": "10"
從第 30 行開(kāi)始，提供 10 條記錄。
同樣，服務(wù)器有責(zé)任準(zhǔn)備一個(gè)準(zhǔn)確反映所請(qǐng)求數(shù)據(jù)的 JSON 響應(yīng)。
在我們的例子中，這意味著服務(wù)器需要有邏輯來(lái)讀取文本文件到正確的起點(diǎn)（數(shù)據(jù)行 31 - 記住偏移量從零開(kāi)始），總共 10 行（第 31 到 40 行）。
上述來(lái)自 DataTables 的請(qǐng)求中的其他字段描述了如何對(duì)數(shù)據(jù)進(jìn)行排序和過(guò)濾。在我們的例子中沒(méi)有過(guò)濾器"search[value]": "",- 數(shù)據(jù)將按第一列升序排序。
最后的筆記
我故意沒(méi)有描述以下內(nèi)容：
1) 您的服務(wù)器端代碼如何處理它發(fā)送回 DataTables 的 JSON 響應(yīng)的創(chuàng)建；
2) 服務(wù)器端代碼如何解析它從 DataTables 收到的表單請(qǐng)求。
這完全取決于您的服務(wù)器端技術(shù)是什么。數(shù)據(jù)表不在乎。它只是傳遞 JSON 消息——它與服務(wù)器端實(shí)現(xiàn)分離——它應(yīng)該是這樣的。
關(guān)于此處描述的“延遲渲染”選項(xiàng)，這是一個(gè)增強(qiáng)功能，您可以在需要時(shí)選擇添加它。但我建議首先讓更基本的服務(wù)器端實(shí)現(xiàn)工作。
