使用 cascadePanes 和 viewTotal 的 50k 行
此实例演示了在管理大批量数据时启用 cascadePanes 和 viewTotal 的搜索面板的性能（此例中为 50k 行）。
| 姓名 | 职位 | 办公室 | 分机号 | 入职时间 | 工资 |
|---|---|---|---|---|---|
| 姓名 | 职位 | 办公室 | 分机号 | 入职时间 | 工资 |
- Javascript
- HTML
- CSS
- Ajax
- 服务器端脚本
- 注释
下面显示的 Javascript 用于初始化此示例中显示的表格
$('#example').DataTable({ ajax: '../../../../examples/ajax/data/data_50k.txt', columns: [ { data: 'name' }, { data: 'position' }, { data: 'office' }, { data: 'extn' }, { data: 'start_date' }, { data: 'salary' } ], layout: { top1: { searchPanes: { cascadePanes: true, viewTotal: true } } } });
new DataTable('#example', { ajax: '../../../../examples/ajax/data/data_50k.txt', columns: [ { data: 'name' }, { data: 'position' }, { data: 'office' }, { data: 'extn' }, { data: 'start_date' }, { data: 'salary' } ], layout: { top1: { searchPanes: { cascadePanes: true, viewTotal: true } } } });
除上述代码外，还加载了以下 Javascript 库文件以供此示例中使用
下面显示的 HTML 是原始 HTML 表格元素，它尚未被 DataTables 增强
此示例使用了一些额外的 CSS，超出从库文件中加载的（如下所示），以便正确显示表格。下面显示了使用的额外 CSS
加载了以下 CSS 库文件以供此示例中使用，以便为表格提供样式
此 table 通过 Ajax 加载数据。最新加载的数据显示在下面。加载任何附加数据时，此数据将自动更新。
下面显示用于执行此表格的服务器端处理的脚本。请注意，这只是一个使用 PHP 的示例脚本。可以使用任何语言编写服务器端处理脚本，并使用 DataTables 文档中描述的协议。