Ajax

DataTable 的数据主要来自三个不同的位置

HTML - 当你的数据表已经存在并填充数据时是最理想的。
Javascript 数组 - 当你的数据存在 Javascript 数组中时使用
Ajax 数据源

本手册的这个部分着重介绍如何使用最后一个选项，因为通过 Ajax 载入数据非常方便 - 例如通过 HTTP API 数据信息或者仅将数据表逻辑与 HTML 分开。

使用 Ajax 载入数据额外的优点是您可以启用 DataTables 的 deferRender 选项来提升性能 - 该选项启用后，会仅在页面上需要绘制 DOM 元素时才创建，在将数据插入表格时可降低初始 CPU 负载。

载入数据

只需使用 ajax 参数设置 Ajax 请求的网址即可使用 DataTables 载入 Ajax 数据。例如，以下是使用 Ajax 来源的数据的最小配置

$('#myTable').DataTable( {
    ajax: '/api/myData'
} );

JSON 数据源

当考虑 DataTables 中的 Ajax 载入数据时，我们几乎都是指 JSON 有效内容 - 也就是说，从服务器返回的数据采用的是 JSON 数据结构。这是因为 JSON 衍生自 Javascript，因此自然可以与 DataTables 等 Javascript 库完美结合。它还是一种轻量且易于理解的数据格式，已被证明在 Javascript 领域非常受欢迎。

可以使用其他数据格式，如 XML 和 YAML 与 DataTables，尽管这些格式在使用之前需要转换成 Javascript 对象标记(即 JSON) - 这通常使用 ajax.dataSrc 完成。本文档的剩余部分将仅考虑 JSON。

利用我们的 JSON 数据源，我们需要两条关键信息

对象中用于表示表格中数据行的数组数据在哪里
每个列的数据点在行对象/数组中的位置。

数据数组位置

DataTables需要一个条目数组来表示表格数据，其中的每个条目都是一行。通常该条目是一个对象或一个数组（更详细的讨论见下方）——因此我们需要做的第一件事是告诉DataTables数据源中的该数组的位置。

例如，考虑一下下面左侧所示的三个JSON数据对象，正如您所见，每三个结构包含相同的数据用于显示在表格中的数组，但是那个数组的位置每个都不相同。每个都是完全有效的，可以在不同的情形中使用——没有一个“正确的方式”！

使用ajax.dataSrc（即“数据源”）选项告诉DataTables数据数组在JSON结构中的位置。ajax.dataSrc通常作为指示Javascript对象表示法中该位置的字符串——即只需将它设置为数组所在属性的名称！空字符串是一个特殊情况，它告诉DataTables期待一个数组（如上面第一个示例中所示）。

三个数据结构各用它们对应的DataTables初始化显示出来了。

1) 简单的数据数组

[
    {
        "name": "Tiger Nixon",
        "position": "System Architect",
        "salary": "$320,800",
        "start_date": "2011/04/25",
        "office": "Edinburgh",
        "extn": "5421"
    },
    ...
]

$('#myTable').DataTable( {
    ajax: {
        url: '/api/myData',
        dataSrc: ''
    },
    columns: [ ... ]
} );

2) 带有数据属性的对象——请注意，这里展示的数据参数格式可以使用简化的DataTables初始化，因为数据是DataTables在源数据对象中寻找的默认属性。

{
    "data": [
        {
            "name": "Tiger Nixon",
            "position": "System Architect",
            "salary": "$320,800",
            "start_date": "2011/04/25",
            "office": "Edinburgh",
            "extn": "5421"
        },
        ...
    ]
}

$('#myTable').DataTable( {
    ajax: '/api/myData',
    columns: [ ... ]
} );

// or!

$('#myTable').DataTable( {
    ajax: {
        url: '/api/myData',
        dataSrc: 'data'
    },
    columns: [ ... ]
} );

3) 带有员工属性的对象

{
    "staff": [
        {
            "name": "Tiger Nixon",
            "position": "System Architect",
            "salary": "$320,800",
            "start_date": "2011/04/25",
            "office": "Edinburgh",
            "extn": "5421"
        },
        ...
    ]
}

$('#myTable').DataTable( {
    ajax: {
        url: '/api/myData',
        dataSrc: 'staff'
    },
    columns: [ ... ]
} );

列数据点

现在DataTables知道在哪里获取行数据，我们需要告诉它从哪里获取该行中每个单元格的数据——这是通过columns.data选项来完成的。

再次考虑三种不同的数据格式，同样在下侧左侧显示——每种情况下都仅显示一行数据（即没有为了简洁而采用上面的结构封装）。

如您所见，在三个情况中的每一个，行具有相同的数据，但是JSON数据结构是不同的。我们使用columns.data属性告诉DataTables从哪里获取每个列的数据。

如上所述的ajax.dataSrc选项一样，columns.data通常作为表示Javascript点对象表示法中所需数据位置的字符串。它还可以以其他形式给定，例如用于访问数组的索引。

三个数据结构对应的DataTables初始化显示在右侧。

1) 数据数组——请注意，数组选项不需要设置columns.data选项。这是因为columns.data的默认值为列索引（例如0, 1, 2...）

[
    "Tiger Nixon",
    "System Architect",
    "$320,800",
    "2011/04/25",
    "Edinburgh",
    "5421"
]

$('#myTable').DataTable( {
    ajax: ...
} );

// or!

$('#myTable').DataTable( {
    ajax: ...,
    columns: [
        { data: 0 },
        { data: 1 },
        { data: 2 },
        { data: 3 },
        { data: 4 },
        { data: 5 }
    ]
} );

2) 数据对象

{
    "name": "Tiger Nixon",
    "position": "System Architect",
    "salary": "$320,800",
    "start_date": "2011/04/25",
    "office": "Edinburgh",
    "extn": "5421"
}

$('#myTable').DataTable( {
    ajax: ...,
    columns: [
        { data: 'name' },
        { data: 'position' },
        { data: 'salary' },
        { data: 'state_date' },
        { data: 'office' },
        { data: 'extn' }
    ]
} );

3) 嵌套对象——在这种情况下，请注意在嵌套对象中，我们使用点对象表示法，例如hr.position，来访问嵌套数据。凭借此功能，几乎任何JSON数据结构都可以与DataTables一起使用

{
    "name": "Tiger Nixon",
    "hr": {
        "position": "System Architect",
        "salary": "$320,800",
        "start_date": "2011/04/25"
    },
    "contact": {
        "office": "Edinburgh",
        "extn": "5421"
    }
}

$('#myTable').DataTable( {
    ajax: ...,
    columns: [
        { data: 'name' },
        { data: 'hr.position' },
        { data: 'hr.salary' },
        { data: 'hr.state_date' },
        { data: 'contact.office' },
        { data: 'contact.extn' }
    ]
} );

可选参数

除了行的数据之外，DataTables 可以在每个单独行的数据源对象上应用以下可选参数，为您执行自动操作。

参数名称	类型	说明
`DT_RowId`	`字符串`	将 `tr` 节点的 ID 属性设置为该值
`DT_RowClass`	`字符串`	将该类添加到 `tr` 节点
`DT_RowData`	`对象`	使用 jQuery `data()` 方法向行添加对象中包含的数据，以设置数据，该数据也可以用于稍后的检索（例如在点击事件中）。
`DT_RowAttr`	`对象`	将对象中包含的数据作为属性添加到行 `tr` 节点。对象键用作属性键，而值用作相应的属性值。这是使用 jQuery `param()` 方法执行的。请注意，此选项需要 DataTables 1.10.5 或更高版本。

实际示例

DataTables 示例包含大量示例，说明 DataTables 如何读取 Ajax 加载的数据。

Ajax 配置

为了填补我们的 Ajax 加载讨论，值得一提的是，DataTables 目前不幸的是不支持通过 Ajax 进行配置。这是未来将要审查的内容，但 JSON 不提供表示在 DataTables 配置中可能非常有用的 Javascript 函数的选项，因此 Ajax 加载的配置无法使用 DataTables 提供的所有选项。