Ajax 加载搜索窗格选项
这是 DataTables 的搜索窗格扩展。此示例展示了如何使用客户端处理通过 ajax 填充搜索窗格。为此，搜索窗格选项必须在 ajax json 数据中定义，否则搜索窗格将像往常一样从表中提取数据。所需 JSON 的结构在此处“返回的数据”标题下记录为 此处。
值得注意的是，由于用户需要为搜索窗格选项提供准确的数据，因此使用此设置不支持 searchPanes.cascadePanes 或 searchPanes.viewTotal。虽然仍然可以启用这些选项，但建议不要启用，因为可能会导致意外的行为。
| 名 | 姓 | 电话 | 网站 |
|---|
- Javascript
- HTML
- CSS
- Ajax
- 服务器端脚本
- 备注
下面显示的 Javascript 用于初始化此示例中显示的表
$('#example').DataTable({ ajax: '../resources/options.json', columns: [ { data: 'users.first_name' }, { data: 'users.last_name' }, { data: 'users.phone' }, { data: 'sites.name' } ], columnDefs: [ { searchPanes: { show: true }, targets: [0, 1, 2, 3] } ], layout: { top1: { searchPanes: { viewTotal: true } } } });
new DataTable('#example', { ajax: '../resources/options.json', columns: [ { data: 'users.first_name' }, { data: 'users.last_name' }, { data: 'users.phone' }, { data: 'sites.name' } ], columnDefs: [ { searchPanes: { show: true }, targets: [0, 1, 2, 3] } ], layout: { top1: { searchPanes: { viewTotal: true } } } });
除以上代码外，还加载了以下 Javascript 库文件以用于此示例
下面显示的 HTML 是原始 HTML 表元素，在它被 DataTables 增强之前
此示例使用了一点额外的 CSS，超出了从库文件（如下所示）加载的内容，以便正确显示表。下面显示使用了的附加 CSS
加载以下 CSS 库文件用于此示例，以提供表的样式
此表通过 Ajax 加载数据。已加载的最新数据显示在下面。随着任何附加数据的加载，此数据将自动更新。
用于执行此表的服务器端处理的脚本如下所示。请注意，这只是一个使用 PHP 的示例脚本。服务器端处理脚本可以用任何语言编写，使用 DataTables 文档中描述的协议。