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 文档中描述的协议。