延遲載入資料
當 DataTables 與伺服器端處理一起使用時，預設行為是讓 DataTables 自動發出 Ajax 呼叫並載入資料，移除表格中可能已有的任何內容。然而，當表格的第一頁已經預先載入到 HTML 中時（您可能會這樣做以確保可訪問性或效能考量），這種行為可能並不總是理想的。
這種自動 Ajax 呼叫以取得第一頁資料的行為可以透過使用 deferLoading 初始化屬性來覆蓋。它有兩個目的，首先是表明需要延遲載入，同時也告知 DataTables 完整表格中有多少筆記錄，在此範例中為 57 筆（這允許資訊元素和分頁正確顯示）。
在下面的範例中，HTML 頁面已經有前 10 行資料，因此我們使用 deferLoading 來告知 DataTables 這些資料是可用的，並且應該等待使用者互動（排序、分頁等）後再發出 Ajax 呼叫。
| 名字 | 姓氏 | 職位 | 辦公室 | 開始日期 | 薪資 |
|---|---|---|---|---|---|
| Airi | Satou | 會計 | 東京 | 2008 年 11 月 28 日 | $162,700 |
| Angelica | Ramos | 執行長 (CEO) | 倫敦 | 2009 年 10 月 9 日 | $1,200,000 |
| Ashton | Cox | 初級技術作家 | 舊金山 | 2009 年 1 月 12 日 | $86,000 |
| Bradley | Greer | 軟體工程師 | 倫敦 | 2012 年 10 月 13 日 | $132,000 |
| Brenden | Wagner | 軟體工程師 | 舊金山 | 2011 年 6 月 7 日 | $206,850 |
| Brielle | Williamson | 整合專家 | 紐約 | 2012 年 12 月 2 日 | $372,000 |
| Bruno | Nash | 軟體工程師 | 倫敦 | 2011 年 5 月 3 日 | $163,500 |
| Caesar | Vance | 售前支援 | 紐約 | 2011 年 12 月 12 日 | $106,450 |
| Cara | Stevens | 銷售助理 | 紐約 | 2011 年 12 月 6 日 | $145,600 |
| Cedric | Kelly | 資深 Javascript 開發人員 | 愛丁堡 | 2012 年 3 月 29 日 | $433,060 |
| 名字 | 姓氏 | 職位 | 辦公室 | 開始日期 | 薪資 |
- Javascript
- HTML
- CSS
- Ajax
- 伺服器端腳本
- 註解
以下顯示的 Javascript 用於初始化此範例中顯示的表格
$('#example').DataTable({ ajax: 'scripts/server_processing.php', deferLoading: 57, processing: true, serverSide: true });
new DataTable('#example', { ajax: 'scripts/server_processing.php', deferLoading: 57, processing: true, serverSide: true });
除了上面的程式碼之外，還會載入以下 Javascript 函式庫檔案以用於此範例中
以下顯示的 HTML 是原始 HTML 表格元素，在經過 DataTables 增強之前
此範例使用了一些額外的 CSS，超出從函式庫檔案（如下）載入的範圍，以便正確顯示表格。使用的額外 CSS 如下所示
以下 CSS 函式庫檔案載入用於此範例中，以提供表格的樣式
此表格透過 Ajax 載入資料。下面顯示已載入的最新資料。當載入任何其他資料時，此資料將自動更新。
以下顯示用於執行此表格伺服器端處理的腳本。請注意，這僅是使用 PHP 的範例腳本。可以使用任何語言編寫伺服器端處理腳本，使用 DataTables 文件中描述的協定。