渲染数组
此示例演示了在被渲染的数组上进行搜索。当使用数组时，可以将数组的自定义列类型应用于 SearchBuilder。这将为用户提供专门用于处理数组的条件，因为并非所有常规条件都能返回预期的结果。
选择 权限 > 等于 > 台式机、打印机、服务器 来展示 SearchBuilder 如何处理数组的顺序。简而言之，顺序并不重要，SearchBuilder 将按字母顺序排列每个数组中的值。
| 名字 | 姓氏 | 位置 | 权限 |
|---|---|---|---|
| 名字 | 姓氏 | 位置 | 权限 |
- Javascript
- HTML
- CSS
- Ajax
- 服务器端脚本
- 注释
下面显示的 Javascript 用于初始化此示例中显示的表格
$('#example').DataTable({ ajax: '../resources/arrayData.json', columns: [ { data: 'users.first_name' }, { data: 'users.last_name' }, { data: 'sites.name' }, { data: 'permission', render: { _: '[, ].name', sb: '[].name' }, searchBuilder: { orthogonal: 'sb' }, searchBuilderType: 'array' } ], layout: { top1: 'searchBuilder' } });
new DataTable('#example', { ajax: '../resources/arrayData.json', columns: [ { data: 'users.first_name' }, { data: 'users.last_name' }, { data: 'sites.name' }, { data: 'permission', render: { _: '[, ].name', sb: '[].name' }, searchBuilder: { orthogonal: 'sb' }, searchBuilderType: 'array' } ], layout: { top1: 'searchBuilder' } });
除了以上代码，还加载以下 Javascript 库文件以在此示例中使用
下面显示的 HTML 是原始 HTML 表格元素，未经 DataTables 增强
此示例使用了一点点额外的 CSS，除了从库文件中加载的 CSS（如下方所示），以正确显示表格。下面显示使用额外的 CSS
加载以下 CSS 库文件在此示例中使用，以提供表格样式
此表格通过 Ajax 加载数据。已加载的最新数据如下图所示。随着加载任何附加数据，此数据将自动更新。
用于执行此表格服务器端处理的脚本如下所示。请注意，这只是一个使用 PHP 的示例脚本。服务器端处理脚本可以用任何语言编写，使用 DataTables 文档中描述的协议。