帶有切換功能的建立模式視窗
此範例展示了 StateRestore (stateRestoreConfig) 的 toggle 選項如何用於決定 DataTables 的哪些元素在建立新狀態時應儲存其狀態。此範例顯示了 toggle 選項的所有可用選項，除了特定欄位選項。它們在另一個範例中。
此範例包含所有具有內建狀態儲存元素的擴充套件。這些是...
- SearchBuilder
- SearchPanes
- Scroller
- Select
| ID | 名字 | 姓氏 | 郵遞區號 | 國家 |
|---|
- Javascript
- HTML
- CSS
- Ajax
- 伺服器端腳本
- 註解
以下顯示的 Javascript 用於初始化此範例中顯示的表格
$('#example').DataTable({ ajax: '../data/2500.txt', keys: true, layout: { top2Start: 'searchPanes', top1Start: 'searchBuilder', topStart: { buttons: [ { extend: 'createState', config: { creationModal: true, toggle: { length: true, order: true, paging: true, scroller: true, search: true, searchBuilder: true, searchPanes: true, select: true } } }, 'savedStates' ] } }, rowId: 0, scrollY: 200, scrollCollapse: true, scroller: true, select: true });
$('#example').DataTable({ ajax: '../data/2500.txt', keys: true, layout: { top2Start: 'searchPanes', top1Start: 'searchBuilder', topStart: { buttons: [ { extend: 'createState', config: { creationModal: true, toggle: { length: true, order: true, paging: true, scroller: true, search: true, searchBuilder: true, searchPanes: true, select: true } } }, 'savedStates' ] } }, rowId: 0, scrollY: 200, scrollCollapse: true, scroller: true, select: true });
除了上述程式碼外，還載入了以下 Javascript 函式庫檔案以供此範例使用
以下顯示的 HTML 是原始 HTML 表格元素，在 DataTables 增強之前
此範例使用了一些超出從函式庫檔案載入的額外 CSS（如下），以便正確顯示表格。以下顯示了使用的額外 CSS
以下 CSS 函式庫檔案已載入供此範例使用，以提供表格的樣式
此表格透過 Ajax 載入資料。以下顯示已載入的最新資料。此資料將在載入任何其他資料時自動更新。
以下顯示用於執行此表格伺服器端處理的腳本。請注意，這只是一個使用 PHP 的範例腳本。伺服器端處理腳本可以使用任何語言編寫，使用DataTables 文件中描述的協定。