Ajax 数据源（对象）
为了方便起见，默认情况下，数据表期望将数组用作表中行的**数据源**。但是，这在某些时候并非十分有用，您可能希望将数据表用作每行的**数据源**（即，每行由一个对象来描述），因为这样能极大地提高数据处理的容易程度，特别是当您使用 API 且不需要一直跟踪阵列索引的时候。
通过使用 columns.data 选项，您可以非常轻松地进行该操作，并且您可以使用该选项告知数据表从每个列的数据源对象中使用怎样的属性。
在该示例中，Ajax 源返回一个由数据表用于显示该表格的对象数组。在此示例中行的**数据源**结构为
{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$3,120",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
}
如需详细了解使用 Ajax 数据加载数据表，请参阅手册中 Ajax 部分.
| 姓名 | 职位 | 办公室 | 分机 | 入职日期 | 薪水 |
|---|---|---|---|---|---|
| 姓名 | 职位 | 办公室 | 分机 | 入职日期 | 薪水 |
- Javascript
- HTML
- CSS
- Ajax
- 服务器端脚本
- 评论
下面显示的 Javascript 用于初始化此示例中展示的表格
$('#example').DataTable({ ajax: 'data/objects.txt', columns: [ { data: 'name' }, { data: 'position' }, { data: 'office' }, { data: 'extn' }, { data: 'start_date' }, { data: 'salary' } ] });
new DataTable('#example', { ajax: 'data/objects.txt', columns: [ { data: 'name' }, { data: 'position' }, { data: 'office' }, { data: 'extn' }, { data: 'start_date' }, { data: 'salary' } ] });
除了以上代码外，还加载了以下 Javascript 库文件以便在此示例中使用
下面所示的 HTML 为原始 HTML 表格元素，它是由数据表优化之前的样子
此示例在从库文件加载的内容（见下文）外，还额外使用了一些 CSS 才能正确显示表格。所用的额外 CSS 如下所示
加载了以下 CSS 库文件以便在此示例中使用，为表格提供样式
此表格通过 Ajax 加载数据。下面显示了最近加载的最新数据。随着其他额外数据加载进来，该数据将自动更新。
下面所示是用于执行此表格服务器端处理的脚本。请注意，这仅是一个使用 PHP 的示例脚本。服务器端处理脚本可以使用任何语言编写，其中使用的 协议由数据表文档中予以描述.