带切换功能的创建模态窗口
此示例演示如何利用 StateRestore (stateRestoreConfig) 的 toggle 选项来确定 DataTables 在创建新状态时应保存哪些元素的状态。除了列特定选项外，此示例演示了 toggle 选项可用的所有选项。这些选项位于一个 单独的示例 中。
此示例包含所有具有内置状态保存元素的扩展。以下是这些扩展...
- 搜索构建器
- 搜索面板
- 滚动条
- 选择
| 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 文档中介绍的协议。