抽象类型
这是 DataTables 的 SearchPanes 扩展。它根据列的值筛选结果。
此示例演示如何允许面板针对抽象数据类型进行正确排序。只需在主 DataTable 中包括适用于该列的插件，面板就会针对其列使用相同的类型。
| 服务器名称 | IP 地址 |
|---|---|
| 宙斯 | 90.4.3.2 |
| 赫尔墨斯 | 90.321.1.6 |
| 哈迪斯 | 2.6.6.6 |
| 波塞冬 | 0.1.2.3 |
| 雅典娜 | 172.4.12.1111 |
| 比尔 | 172.29.0.162 |
| 鲍勃 | 172.29.0.162 |
| 本 | 172.29.0.162 |
| 服务器名称 | IP 地址 |
- JavaScript
- HTML
- CSS
- Ajax
- 服务器端脚本
- 备注
下面显示的 JavaScript 用于初始化此示例中显示的表格
$('#example').DataTable({ layout: { top1: 'searchPanes' }, columnDefs: [ { type: 'ip-address', targets: 1 }, { searchPanes: { show: true }, targets: ['_all'] } ] });
new DataTable('#example', { layout: { top1: 'searchPanes' }, columnDefs: [ { type: 'ip-address', targets: 1 }, { searchPanes: { show: true }, targets: ['_all'] } ] });
除了以上代码之外，还加载了下列 JavaScript 库文件以用于此示例
下面显示的 HTML 是原始 HTML 表格元素，在 DataTables 增强之前
此示例使用了一些并非从库文件中加载的附加 CSS（如下所示），以正确显示表格。所使用的附加 CSS 如下所示
加载下列 CSS 库文件以用于此示例，以提供表格样式
此表格通过 Ajax 加载数据。加载的最新数据如下所示。任何附加数据加载后，此数据将自动更新。
用于对此表格执行服务器端处理的脚本如下所示。请注意，这只是使用 PHP 的示例脚本。服务器端处理脚本可以使用任何语言编写，使用 DataTables 文档中所述的协议。