数据

数据是复杂的，所有数据都是不同的。因此，DataTables 提供了多种选项，可用于配置它如何获取表中要显示的数据，以及如何处理该数据。

DataTables 处理数据时有三个核心概念，此页面将对此进行详细讨论

• 处理模式
• 数据类型
• 数据来源

处理模式

DataTables 有两种不同的数据处理模式（数据的排序、搜索等）

• 客户端处理 - 预先加载完整数据集并在浏览器中进行数据处理。
• 服务器端处理 - 每次重新绘制表格都会发出 Ajax 请求，只会返回每次显示所需的数据。数据处理在服务器上执行。

每种处理模式都有自己的优点和缺点，但根据表中行的数量选择哪种模式的主要指标。一般而言，如果您处理的行少于 10,000 行，请使用客户端处理，如果行多于 100,000 行，请使用服务器端处理。介于两者之间的是一个灰色地带，您需要根据应用程序的性质以及您希望显示的数据做出决定！

请注意，这两种处理模式是互斥的 - 它们不能同时使用，也不可能从一种模式动态地更改为另一种模式。

客户端处理

客户端处理是 DataTables 的默认操作模式，因为它易于使用且不需要编写其他代码。在客户端处理模式中，DataTables 表中数据的排序、搜索、分页以及 DataTables 执行的所有其他数据处理操作都在浏览器中由 DataTables 本身完成。

服务器端处理

服务器端处理通常在您希望在表中显示海量数据时使用（例如数百万行）。在这些情况下，将数据发送给客户端，然后让 Javascript 处理数据可能会导致显着的开销，并可能导致最终应用程序的性能不佳。在服务器端处理模式中，所有对数据的排序、搜索等操作都将移交到服务器端，而服务器端可以使用那里的数据库引擎，数据库引擎专门针对这些类型的操作进行过微调。每一页数据（在数据表格术语中称为“绘图”）都涉及向服务器发出一个 Ajax 请求。尽管每个 Ajax 请求可能需要几分之一秒才能完成，但这种方法可能比在所有数据加载过程中花费大量的等待时间来得更加可取。

服务器端处理由 serverSide 选项启用，本手册的服务器端处理部分中提供了关于服务器端处理操作方式的完整文档。

数据源类型

用于数据表格的主要数据源必须始终是一个数组（使用 DOM 源数据时会自动创建）。数组中的每个项目都将定义要显示的行，而数据表格可以使用三种基本 Javascript 数据类型作为行的数据源

• 数组 - []
• 对象 - {}
• 实例 - new MyClass()

数据表格可以使用 columns.data 和 columns.render 选项来使用来自这些选项的任何数据。默认的运行模式是数组，但对象和实例可能非常有用，因为在处理复杂数据时它们通常更加直观。

数组

数据表格中的数组易于操作，因为数组元素与数据显示的列之间的映射只需通过列索引来读取该位置的数组元素值即可。例如，第一个表列映射到行数据源的第一个数组元素，依此类推。

因此，在将数组用作数据源时，每个数组中的元素数量必须等于表中的列数量。例如，对于一个 6 列的表，您可能具有

var data = [
    [
        "Tiger Nixon",
        "System Architect",
        "Edinburgh",
        "5421",
        "2011/04/25",
        "$3,120"
    ],
    [
        "Garrett Winters",
        "Director",
        "Edinburgh",
        "8422",
        "2011/07/25",
        "$5,300"
    ]
]

并且表初始化为

$('#example').DataTable( {
    data: data
} );

这将生成一张这样的表

名称	职位	办公室	分机	开始日期	工资
Tiger Nixon	系统架构师	爱丁堡	5421	2011/04/25	$3,120
Garrett Winters	主管	爱丁堡	8422	2011/07/25	$5,300

对象

对象非常适用于以与数组略微不同的直观方式使用。如果您正在通过 API 积极处理数据，那么对象可以非常轻松地获取特定的数据片段，因为您只需要使用属性名称，而不必记住该数据所在的数组索引（例如使用 data.name，而不是 data[0]）。

对象还可以包含比数据表格显示所需的更多信息，对于操作数据（例如包括对终端用户不可见的数据库主键）来说非常有用。

使用对象的下行是，您需要明确告知 DataTables 它应从对象中使用哪个属性针对每一列。这可使用 columns.data 和/或 columns.render 选项来完成。

对象化数据可能如下所示

[
    {
        "name":       "Tiger Nixon",
        "position":   "System Architect",
        "salary":     "$3,120",
        "start_date": "2011/04/25",
        "office":     "Edinburgh",
        "extn":       "5421"
    },
    {
        "name":       "Garrett Winters",
        "position":   "Director",
        "salary":     "$5,300",
        "start_date": "2011/07/25",
        "office":     "Edinburgh",
        "extn":       "8422"
    }
]

并且表初始化为

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

注意只有 4 列被定义，而且每列中显示的数据很容易定义，可以通过更改每个属性所用位置来定义，而无需像使用数组数据源那样重新排序源对象

这将导致一个这样的表格

名称	职位	工资	办公室
Tiger Nixon	系统架构师	$3,120	爱丁堡
Garrett Winters	主管	$5,300	爱丁堡

实例

让 DataTables 从 Javascript 对象实例中显示信息非常有用，因为这些实例定义了用于更新数据的抽象方法。例如，您可能有一个 Employee 类或 Car 类，等等，具体取决于您正在建模的数据。可以在 DataTables 中像使用对象一样使用实例 - 只需传入您的对象并向 columns.data 提供方法或属性名，以获取每列的数据。

function Employee ( name, position, salary, office ) {
    this.name = name;
    this.position = position;
    this.salary = salary;
    this._office = office;

    this.office = function () {
        return this._office;
    }
};

$('#example').DataTable( {
    data: [
        new Employee( "Tiger Nixon", "System Architect", "$3,120", "Edinburgh" ),
        new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh" )
    ],
    columns: [
        { data: 'name' },
        { data: 'salary' },
        { data: 'office' },
        { data: 'position' }
    ]
} );

注意 office 是上述类的一个方法，而 name、position 和 salary 是属性。DataTables 将自动知道有一个函数，执行它并使用返回的值填充单元格（注意您还可以使用语法 office() 来明确表明使用了一个函数 - 有关进一步信息，请参阅 columns.data）。

与上述基于对象的的数据源方法类似，尽管在这种情况下 Position 列显示在表格末尾以表明可以按任何顺序读取属性，但这将导致一个这样的表格

名称	工资	办公室	职位
Tiger Nixon	$3,120	爱丁堡	系统架构师
Garrett Winters	$5,300	爱丁堡	主管

数据源

现在已定义了处理模式和数据类型的概念，我们可以考虑 DataTables 实际上如何获取它操作的数据。DataTables 将在表格中显示的数据有三种基本来源

• DOM（即文档的纯 HTML）
• Javascript
• Ajax 来源的数据

DOM

当 DataTables 启动时，它将自动检查它正在操作的表格中已经存在的数据并将其用于该表格（请注意，如果您使用 data 或 ajax 传入数据以获取新数据，它将扔掉这些数据！）。这是使用 DataTables 的最简单的方法 - 使用常规 HTML 表格。

注意，当使用 DOM 来源表格时，DataTables 将默认使用数组作为数据源（请参阅上方），尽管您可以使用 columns.data 选项让它为行数据构建对象。

HTML5

DataTables 还可以使用 HTML5 data-* 属性，这可以为 DataTables 提供其他信息，以便对数据进行排序和搜索。例如，您可能有一列日期格式为“21st November 2016”。浏览器会难以对该日期进行排序，但是您可以为 HTML 的一部分（它包含一个易于排序的时间戳）提供 data-order 属性作为该列的一部分。通过扩展，您可以使用 data-search 提供搜索数据。例如

<td data-search="21st November 2016 21/11/2016" data-order="1479686400">
    21st November 2016
</td>

DataTables 将自动检测

• 排序数据：data-order 和 data-sort 属性
• 搜索数据：data-search 和 data-filter 属性。

有关更多信息，请参阅 正交数据 的手册条目。

Javascript

您可以运用 data 初始化选项指示 DataTables 使用提供给它的数据。此数据可以采用数组、对象或实例的形式（见上文），可以来自您想要的任何地方！只要 Javascript 可以访问数据，您就可以将数据发送至 DataTables（无论它来自哪个自定义 Ajax 调用、WebSocket 或古老的数组数据）。

在大量使用 DataTables API 时，这种方法特别有用，尤其是 row.add() 和 row().remove() 方法可以用于动态地增删表中的数据，同样，您可以选择来自任何来源。

Ajax

Ajax 数据源与 Javascript 数据源非常类似，但是 DataTables 将制作 Ajax 调用来为您获取数据。将表数据从特定脚本中提取出来通常非常有用，从而将用于提取数据的逻辑与用于显示数据的逻辑分开。DataTables 中的 Ajax 数据源由 ajax 选项控制。在最简单的形式中，您将属性值设置为一个字符串，指向您想要从中加载数据的 URL。

与 Javascript 数据源一样，Ajax 数据源可以采用对象或数组的形式（见上文），但在此情况下不能采用实例的形式（因为它们无法在 JSON 中表示）。

服务器端处理（如上所述）是 Ajax 数据源的一种特殊形式，据此，仅当表中的每一页需要向用户显示时，才通过 Ajax 请求来检索该页显示所需的数据。这样可以在大型数据集上利用服务器上的数据库引擎的能力。有关服务器端处理的更多信息以及如何实现它，请参阅 本手册中的文档。

此手册的下一部分将详细讨论通过 Ajax 加载数据。

下一步

当然，数据是 DataTables 的核心，并且不可能在一页中完整地涵盖这个主题。此页对 DataTables 如何处理数据提供了概述，但其他主题包括

• 正交数据
• 渲染器
• Ajax 来源的数据
• 对数据的 API 访问.