Ajax 数据

此示例显示 Responsive 扩展与 DataTables 中的 Ajax 来源数据 协作。请注意,不需要特殊的初始化。通过将 responsive 类添加到 table 元素,即可启用 Responsive。

姓名 职位 办公室 分机号 开始时间 工资
姓名 职位 办公室 分机号 开始时间 工资
  • Javascript
  • HTML
  • CSS
  • Ajax
  • 服务器端脚本
  • 注释

以下所示的 Javascript 用于初始化本示例中显示的表格

$('#example').DataTable({ ajax: '../../../../examples/ajax/data/objects.txt', columns: [ { data: 'name' }, { data: 'position' }, { data: 'office' }, { data: 'extn' }, { data: 'start_date' }, { data: 'salary' } ] });
new DataTable('#example', { ajax: '../../../../examples/ajax/data/objects.txt', columns: [ { data: 'name' }, { data: 'position' }, { data: 'office' }, { data: 'extn' }, { data: 'start_date' }, { data: 'salary' } ] });

除了上述代码,还加载以下 Javascript 库文件以用于本示例

    以下所示 HTML 是原始 HTML 表格元素,在被 DataTables 增强之前

    此示例使用额外的 CSS 样式,超出从库文件(如下所示)加载的样式,以便正确显示表格。下面显示了使用的附加 CSS

    div.container { max-width: 1200px }

    加载以下 CSS 库文件以用于本示例,为表格提供样式

      此表格通过 Ajax 加载数据。下面显示了最近加载的最新数据。此数据将随着加载任何附加数据而自动更新。

      用于对该表格执行服务器端处理的脚本如下所示。请注意,这只是一个使用 PHP 的示例脚本。服务器端处理脚本可以用任何语言编写,使用 DataTables 文档中描述的协议

      其他示例