使用对象的Ajax
大多数RowGroup示例使用数组数据源，因为它们从HTML表中读取数据。但是，也可以使用对象，实际上在使用行分组时通常更有意义，因为很容易确定用于分组的数据点。
本示例演示了基于对象的表数据的Ajax载入，其中 rowGroup.dataSrc用于按Office列进行分组。
| 名称 | 职位 | 办公室 | 分机号 | 开始日期 | 薪水 |
|---|---|---|---|---|---|
| 名称 | 职位 | 办公室 | 分机号 | 开始日期 | 薪水 |
- 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' } ], order: [[2, 'asc']], rowGroup: { dataSrc: 'office' } });
new DataTable('#example', { ajax: '../../../../examples/ajax/data/objects.txt', columns: [ { data: 'name' }, { data: 'position' }, { data: 'office' }, { data: 'extn' }, { data: 'start_date' }, { data: 'salary' } ], order: [[2, 'asc']], rowGroup: { dataSrc: 'office' } });
除了上面的代码外，还加载了以下Javascript库文件以在本示例中使用
下面所示的HTML是原始的HTML表元素，它尚未被DataTables增强
本示例使用一些额外的CSS，超出从库文件中加载的内容（如下所示），以便正确显示表格。下面显示了一些额外的CSS
以下CSS库文件被加载在本示例中使用，以提供表的样式
该表通过Ajax载入数据。下面显示了已经加载的最新数据。随着加载任何其他数据，此数据将自动更新。
下面显示了用于对该表执行服务器端处理的脚本。请注意，这只是一个使用PHP示例脚本。服务器端处理脚本可以用任何语言编写，使用DataTables文档中描述的协议。