正交数据

数据很复杂。数据表中显示的数据不仅具有关于每个数据点如何对应于表中其他数据点的规则，而且每个数据点本身可以采用多种形式。例如考虑货币数据；对于显示，可以使用货币符号和千位分隔符进行格式化，而排序应该按数字进行，并且对数据进行搜索将接受任一形式。

在 DataTables 中，我们称之为正交数据。

DataTables 具有四种内置数据操作，每种操作都可能使用正交（独立）数据源。这四项操作是

display - 显示数据
sort - 用于排序的数据
filter - 用于搜索的数据
type - 检测数据类型的数据

默认情况下，DataTables 将对所有四种操作使用相同的数据，但这可以轻松地使用 data 和 columns.render 初始化选项或 HTML 5 data-* 属性来修改。

数据源

可以将表的正交数据通过数据源数组/对象（注意，对象更容易使用，因为不需要记住数组索引！）作为预定义的值提供（通常这是使用 ajax 加载的数据或 JavaScript 提供的数据源），或者可以在需要时动态计算这些数据。

预定义的值

如果您的数据源中有您希望显示的正交数据，DataTables 可通过将 columns.data 和/或 columns.render 选项作为对象提供，直接利用此数据。

例如，考虑以下日期结构 - 请注意，start_date 对象有一个很好地格式化的 display 属性，该属性将用于显示表中的数据，但也有 timestamp 属性。在这种情况中这非常有用，因为为日期显示选择的形式不容易排序

{
    "name":       "Tiger Nixon",
    "position":   "System Architect",
    "start_date": {
        "display": "Mon 25th Apr 11",
        "timestamp": "1303682400"
    },
    "office":     "Edinburgh"
}

要在表中以这种形式使用数据，可以使用 columns 或 columnDefs 列描述的以下选项

{
    data: 'start_date',
    render: {
        _: 'display',
        sort: 'timestamp'
    }
}

注意，在将 columns.data 或 columns.render 作为对象使用时，必须定义 _ 属性。如果未定义数据选项，_ 属性是“后备”选项（例如，上述对象中没有 display 选项）。

查看此示例以了解实际情况.

计算的值

如果数据源不包含预格式化的正交数据，则可以将 columns.data 和 columns.render 选项作为函数提供。这些函数用于计算显示所需的数据。

例如，考虑以下数据结构

{
    "name":       "Tiger Nixon",
    "position":   "System Architect",
    "start_date": "1303682400",
    "office":     "Edinburgh"
}

虽然起始日期对于计算机使用是好格式，但对于人类来说几乎没用。为了解决此问题，我们可以使用 columns.render 将显示值计算为函数——columns.data 选项告诉渲染器要使用哪些数据

{
    data: 'start_date',
    render: function ( data, type, row ) {
        // If display or filter data is requested, format the date
        if ( type === 'display' || type === 'filter' ) {
            var d = new Date( data * 1000 );
            return d.getDate() +'-'+ (d.getMonth()+1) +'-'+ d.getFullYear();
        }

        // Otherwise the data type requested (`type`) is type detection or
        // sorting data, for which we want to use the integer, so just return
        // that, unaltered
        return data;
    }
}

有关使用 DataTables 的渲染器获得的更多信息，请参阅渲染器手册页和 columns.render 引用文档。

HTML 5

如果使用 ajax 加载数据，上面介绍的从数据源使用正交数据的方法就很好，但如果表已存在于 HTML 中，此方法就不太有用了。对此，DataTables 支持 data-* 属性，可用于保存 DOM 中可见的信息，但最终用户不可见。

DataTables 将自动检测 HTML 单元格中的以下属性

data-sort 和 data-order - 用于排序数据
data-filter 或 data-search - 用于搜索数据

例如，考虑以下 HTML 表行

<tr>
    <td data-search="Tiger Nixon">T. Nixon</td>
    <td>System Architect</td>
    <td>Edinburgh</td>
    <td>61</td>
    <td data-order="1303682400">Mon 25th Apr 11</td>
    <td data-order="3120">$3,120/m</td>
</tr>

请注意

第一列具有 data-search 属性，在本例中允许搜索全名，同时显示显示缩写形式。
第五列具有一个日期，该日期不可直接排序，因此使用 data-order 提供用于排序的 Unix 时间表示。
第六列也使用 data-order，本例中用于提供格式化数字的数字形式。

为了使 HTML 5 data-* 属性检测和处理正常工作，列中的所有单元格必须具有相同的可用属性。如果不具备这一点，DataTables 将发出警告。

查看此示例以了解实际情况

API 接口

当 DataTables 从 HTML 表中读取数据时，默认情况下，它将读取每一行中的数据到一个数组（尽管可以“自定义”此内容），方法是使用 columns.data）。当软件检测到正交 HTML5 属性时，它会将信息读入一个对象，允许每个单元格具有多个数据点（如果需要）。

如果存在单元格的正交数据，单元格的内容（即用户看到的内容）将复制到 display 属性中。HTML5 属性复制到与其同名的属性中，但前面加上 @ 前缀。

如果我们继续上面的示例，它将使用以下结构读取

{
    "0": {
        "display": "T. Nixon",
        "@data-search": "Tiger Nixon"
    },
    "1": "System Architect",
    "2": "Edinburgh",
    "3": "61",
    "4": {
        "display": "Mon 25th Apr 11",
        "@data-order": "1303682400"
    },
    "5": {
        "display": "$3,120/m",
        "@data-order": "3120"
    }
}

如果您不使用 DataTables API 来处理表中的数据，您将永远不需要知道数据的结构。但是，如果您想重新读取数据（例如，使用 row().data()）或添加新行数据（row.add()），您需要确保使用与 DataTables 读取的相同数据结构。如果没有，您将收到 未知参数请求 错误。

要检查 DataTables 用于行的结构，请使用 console.log( myTable.row(':eq(0)').data() ); 来显示表中第一行的数据。