延迟呈现
此示例仅展示 DataTables 的deferRender
选项和 Select 一起使用(请注意,这是 DataTables 2 中的默认设置,这里展示它只是为了清晰度)。延迟呈现可能在 Ajax 加载数据的时候特别有用,因为它允许 DataTables 执行许多增强性能的优化。
姓名 | 职位 | 办公室 | 分机 | 起始日期 | 工资 |
---|---|---|---|---|---|
姓名 | 职位 | 办公室 | 分机 | 起始日期 | 工资 |
- Javascript
- HTML
- CSS
- Ajax
- 服务器端脚本
- 注释
下面展示的 Javascript 用于初始化此示例中的表格
var table = $('#example').DataTable({ ajax: '../../../../examples/ajax/data/objects.txt', columns: [ { data: 'name' }, { data: 'position' }, { data: 'office' }, { data: 'extn' }, { data: 'start_date' }, { data: 'salary' } ], deferRender: true, select: true });
new DataTable('#example', { ajax: '../../../../examples/ajax/data/objects.txt', columns: [ { data: 'name' }, { data: 'position' }, { data: 'office' }, { data: 'extn' }, { data: 'start_date' }, { data: 'salary' } ], deferRender: true, select: true });
除了上面代码之外,还需要加载以下 Javascript 库文件用于此示例
下面展示的 HTML 是原始 HTML 表格元素,在被 DataTables 增强之前
此示例使用除加载的库文件(如下方所示)之外的少量额外 CSS,以正确显示表格。下面显示了使用到的额外 CSS
以下 CSS 库文件用于此示例,为表格提供样式
此表格通过 Ajax 加载数据。加载的最新数据如下所示。此数据将随任何附加数据的加载而自动更新。
下面展示了用于对此表格执行服务器端处理的脚本。请注意,这只是使用 PHP 的一个示例脚本。服务器端处理脚本可以使用任何语言编写,使用 DataTables 文档中描述的协议。