延迟呈现

此示例仅展示 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 文档中描述的协议

      其他示例