Ajax 載入與儲存
此範例示範如何透過 Ajax 操作 StateRestore 擴充套件。
為此，stateRestoreConfig 設定物件的 ajax 選項必須設定為一個 URL，該 URL 將在嘗試儲存狀態時使用。然後會透過表格本身的 ajax URL 再次載入狀態。如果初始傳遞的 JSON 中有 stateRestore 屬性，則存在其中的狀態將會載入到表格中。
值得注意的是，我們只提供客戶端實作。您必須撰寫自己的伺服器端實作，才能將狀態儲存超過目前的會期。
這裡也使用了 Scroller 擴充套件。這是因為它是一種常見的透過 ajax 載入的方式。
| ID | 名字 | 姓氏 | 郵遞區號 | 國家 |
|---|
- Javascript
- HTML
- CSS
- Ajax
- 伺服器端指令碼
- 註解
以下顯示的 Javascript 用於初始化此範例中顯示的表格
$('#example').DataTable({ ajax: { url: '../data/stateRestoreLoad.php', dataSrc: 'data' }, layout: { topStart: { buttons: [ 'createState', { extend: 'savedStates', config: { ajax: '../data/stateRestoreSave.php' } } ] } }, scrollY: 200, scrollCollapse: true });
new DataTable('#example', { ajax: { url: '../data/stateRestoreLoad.php', dataSrc: 'data' }, layout: { topStart: { buttons: [ 'createState', { extend: 'savedStates', config: { ajax: '../data/stateRestoreSave.php' } } ] } }, scrollY: 200, scrollCollapse: true });
除了上述程式碼外，還載入了以下 Javascript 函式庫檔案，供本範例中使用
以下顯示的 HTML 是原始 HTML 表格元素，在經過 DataTables 增強之前
除了從函式庫檔案載入的 CSS (如下所示) 之外，此範例還使用了一些額外的 CSS，以便正確顯示表格。下面顯示了使用的額外 CSS
以下 CSS 函式庫檔案會載入供本範例中使用，以提供表格的樣式
此表格透過 Ajax 載入資料。以下顯示已載入的最新資料。當載入任何額外資料時，此資料會自動更新。
下面顯示用於執行此表格伺服器端處理的指令碼。請注意，這只是一個使用 PHP 的範例指令碼。可以使用任何語言撰寫伺服器端處理指令碼，使用DataTables 文件中描述的協定。