正交数据
为了便于使用，默认情况下，DataTables 期望使用数组作为表格中行的阵列。然而，这种方式并不总是实用，您可能希望 DataTables 使用对象作为每行的阵列（即由对象描述每行的数据），因为这对于梳理数据更加直观，尤其是当您使用 API 且无需跟踪阵列索引时。
这可以通过使用 columns.data 选项轻松实现，您可以使用该选项告知 DataTables 从对象数据源中为每列使用哪个属性。
在此示例中，Ajax 来源返回一个对象数组，DataTables 用于显示表格。此示例中行的阵列结构为
{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$3,120",
"start_date": {
"display": "Mon 25th Apr 11",
"timestamp": "1303682400"
},
"office": "Edinburgh",
"extn": "5421"
}
| 姓名 | 职位 | 办公室 | 分机 | 入职日期 | 工资 |
|---|---|---|---|---|---|
| 姓名 | 职位 | 办公室 | 分机 | 入职日期 | 工资 |
- Javascript
- HTML
- CSS
- Ajax
- 服务器端脚本
- 注释
下面的 Javascript 用于初始化此示例中所示的表格
$('#example').DataTable({ ajax: 'data/orthogonal.txt', columns: [ { data: 'name' }, { data: 'position' }, { data: 'office' }, { data: 'extn' }, { data: { _: 'start_date.display', sort: 'start_date.timestamp' } }, { data: 'salary' } ] });
new DataTable('#example', { ajax: 'data/orthogonal.txt', columns: [ { data: 'name' }, { data: 'position' }, { data: 'office' }, { data: 'extn' }, { data: { _: 'start_date.display', sort: 'start_date.timestamp' } }, { data: 'salary' } ] });
除了上述代码之外，还加载了以下 Javascript 库文件以用于此示例
以下 HTML 是原始 HTML 表格元素，在 DataTables 增强之前
此示例使用了一些额外的 CSS，除了从库文件（如下所示）中加载的 CSS 之外，为了正确显示表格。下面显示了所使用的附加 CSS
加载了以下 CSS 库文件以用于此示例，以便设置表格样式
此表格通过 Ajax 加载数据。加载的最新数据如下所示。此数据将随着任何附加数据的加载而自动更新。
下面显示了用于对该表格执行服务器端处理的脚本。请注意，这只是一个使用 PHP 的脚本示例。服务器端处理脚本可以用任何语言编写，方法是 使用 DataTables 文档中描述的协议。