使用 Ajax 传递的渲染函数对未编码 HTML 字符进行处理
此示例演示当 ajax 数据包含未编码字符 "<", ">" 和 "&" 且正在使用渲染函数时，搜索面板如何交互和工作。
| 名 | 姓 | 位置 | 权限 |
|---|---|---|---|
| 名 | 姓 | 位置 | 权限 |
- Javascript
- HTML
- CSS
- Ajax
- 服务器端脚本
- 备注
下面显示的 Javascript 用于初始化此示例中展示的表格
$('#example').DataTable({ ajax: '../resources/arrayDataHTML.json', columns: [ { data: 'users.first_name' }, { data: 'users.last_name' }, { data: 'sites.name', searchPanes: { show: true }, render: DataTable.render.text() }, { data: 'permission', render: { _: '[, ].name', sp: '[].name' }, searchPanes: { orthogonal: 'sp', show: true } } ], layout: { top1: 'searchPanes' } });
new DataTable('#example', { ajax: '../resources/arrayDataHTML.json', columns: [ { data: 'users.first_name' }, { data: 'users.last_name' }, { data: 'sites.name', searchPanes: { show: true }, render: DataTable.render.text() }, { data: 'permission', render: { _: '[, ].name', sp: '[].name' }, searchPanes: { orthogonal: 'sp', show: true } } ], layout: { top1: 'searchPanes' } });
除上述代码外，还加载了以下 Javascript 库文件以用于此示例
下面显示的 HTML 为原始 HTML 表格元素，在 DataTables 增强之前的样子
为了正确显示表格，此示例使用了额外的 CSS（如下所示），这些 CSS 比从库文件中加载的 CSS 多一点。下面显示所使用的附加 CSS
加载了以下 CSS 库文件以用于此示例，为表格提供样式
此表格通过 Ajax 加载数据。下面显示已加载的最新数据。将自动更新此数据，因为加载了任何其他数据。
下面显示用于执行此表格的服务器端处理的脚本。请注意，这只是一个使用 PHP 的示例脚本。服务器端处理脚本可以用任何语言编写，使用 DataTables 文档中描述的协议。