1 回答

TA貢獻1942條經驗 獲得超3個贊
這將純粹關注“服務器端”解決方案的 DataTables 方面。如何編寫支持它所需的服務器端邏輯超出了此答案的范圍。但我希望這些說明至少能夠闡明該邏輯需要是什么,以及您可以如何處理它。
假設
假設您有一個文本文件,其中包含 1,000 行這樣的數據(或一百萬行 - 但太多行無法同時發送到瀏覽器和 DataTables)。文本文件是一個簡單的管道分隔文件,包含三個字段:
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
您希望使用服務器端處理一次將 10 個項目發送到 DataTables。
您的數據映射到一個簡單的 JSON 結構,就像這樣 - 一組對象(每個對象是一個記錄):
[
{
"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...
]
數據表定義
您的數據表定義看起來像這樣 - 在這個階段它故意非常簡單:
<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>
初步反應
當網頁首次顯示時,它會向 URL ( http://localhost:7000/data ) 發送一個初始 POST 請求,并期望從 Web 服務器接收 JSON 響應,其中包含要顯示的數據.
由于 DataTables 正在使用serverSide: true,因此 DataTables 將期望 JSON 具有特定的結構,如此處所述。
具體來說,服務器必須將所有必填字段(draw、recordsTotal、recordsFiltered和data)添加到它發送到 DataTables 的 JSON 中。
在我們的例子中,它看起來像這樣 - 請注意,它只是我們之前提到的 JSON 結構,添加了一些額外的元數據字段:
{
"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"
}]
}
服務器負責構建此 JSON - 服務器數據集的前 10 條記錄。服務器還告訴 DataTables 它總共有 1,000 條記錄,并且它還沒有過濾掉任何數據(還) - 因此過濾后總共還有 1,000 條記錄。
DataTables 需要所有這些信息,所以它知道要顯示多少個分頁按鈕,以及要顯示哪些分頁數據。
請注意,完成所有這些工作完全是服務器的責任——這就是它被稱為“服務器端”處理的原因。
客戶端(瀏覽器)只有 10 條記錄要呈現 - 所以很快就會發生。
(我剛剛注意到屏幕截圖提到了“500 條記錄”——這是我的服務器端代碼中的一個錯誤——沒有過濾器,所以我需要修復它)。
后續請求
當用戶單擊頁面導航按鈕(例如頁面“4”)時,會觸發從 DataTables 到服務器的新請求。DataTables 使用此處描述的字段自動構建此請求。
請求作為表單數據發送。
在我們的示例中,請求如下所示:
"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"
}
這些字段告訴服務器它需要知道的一切,因此它可以準備正確的響應。
在我們的例子中,最重要的字段是:
"start": "30",
"length": "10"
從第 30 行開始,提供 10 條記錄。
同樣,服務器有責任準備一個準確反映所請求數據的 JSON 響應。
在我們的例子中,這意味著服務器需要有邏輯來讀取文本文件到正確的起點(數據行 31 - 記住偏移量從零開始),總共 10 行(第 31 到 40 行)。
上述來自 DataTables 的請求中的其他字段描述了如何對數據進行排序和過濾。在我們的例子中沒有過濾器"search[value]": "",- 數據將按第一列升序排序。
最后的筆記
我故意沒有描述以下內容:
1) 您的服務器端代碼如何處理它發送回 DataTables 的 JSON 響應的創建;
2) 服務器端代碼如何解析它從 DataTables 收到的表單請求。
這完全取決于您的服務器端技術是什么。數據表不在乎。它只是傳遞 JSON 消息——它與服務器端實現分離——它應該是這樣的。
關于此處描述的“延遲渲染”選項,這是一個增強功能,您可以在需要時選擇添加它。但我建議首先讓更基本的服務器端實現工作。
- 1 回答
- 0 關注
- 115 瀏覽
添加回答
舉報