2011 年 5 月 1 日星期日

扩展数据源选项和 DataTables

更新：此博客文章是在 DataTables 1.10 发布之前编写的，因此并未使用最新的 DataTables 版本中使用的新的 API 或功能，尤其是 columns.render 和 columns.data 选项。此文章仅作历史参考；有关当前 DataTables 版本的信息，请参阅手册。

欢迎来到 DataTables 新博客！我想利用网站的这一部分介绍对 DataTables 很实用的主题，并提供教程介绍如何将 DataTables 中的一些更高级的方面集成到你的网站中。

我的第一篇文章是想介绍 DataTables 即将发布的 1.8 版（目前处于测试阶段：此处提供下载）中的一项新功能 - 扩展数据源选项。DataTables 1.8 中这项新功能放宽了 DataTables 对数据源施加的数据格式化约束。在 DataTables 的以前版本中，服务器端处理或 Ajax 来源的数据应具有以下数据结构

[
    [ "row 1, cell 1", "row 1, cell 2", "row 1, cell 3" ],
    [ "row 2, cell 2", "row 2, cell 2", "row 2, cell 3" ]
]

这是一个数组的数组，表格中每个单元格指定（正好）一个元素。任何偏离此结构或数组中的额外元素都会导致出现错误。虽然这适用于许多表格，并且服务器端脚本足够灵活，从而无需重大修改即可生成这种格式，但它并不特别灵活。

为了增加数据源的灵活性，你可以希望返回一个对象的数组，如下所示

[
    { "cell1": "row 1, cell 1",
      "cell2": "row 1, cell 2",
      "cell3": "row 1, cell 3" 
    },
    { "cell1": "row 2, cell 1",
      "cell2": "row 2, cell 2",
      "cell3": "row 2, cell 3" 
    }
]

通过这种方式，你可以传回不需要直接呈现表格的其他信息。这对于显示和隐藏特定行的详细信息很有用，这种详细信息基于表格中不可见的信息。以前，必须通过隐藏列中的信息或使用额外的 Ajax 请求来完成此操作。这种从对象中读取信息的能力是通过使用 aoColumns 的 mData 初始化选项在 DataTables 1.8 中引入的。

要使用以上示例中显示的对象数组，使用 mData 选项，可以像这样初始化 DataTables

$('#example').dataTable( {
    "aoColumns": [
        { "mData": "cell1" },
        { "mData": "cell2" },
        { "mData": "cell3" }
    ]
} );

在此代码中，我使用 aoColumns 为表格中的每一列创建一个初始化规范（在本例中为三列）——这仅简单地告知 DataTables 如何处理每一列，使用这些值来代替默认值。然后将 mData 设置为从目标列的每行对象中想要获取的属性的名称。请注意，这将使源对象中列数据的顺序变得完全无关！

默认行为

默认情况下，mData 是一个整数值，从该值在数组中的索引读取为列索引（即如果它是第二列，则数组索引 1 是数据源）。这复制了以前版本的 DataTables 处理数据时的行为。因此，此新特性是完全向后兼容的。如果您愿意，您可以将 mData 设置为整数，它可以帮助对原始源中的数据重新排序，如果它给您数组的话。或者，如上例所示，您可以将 mData 设置为字符串，在这种情况下，DataTables 将从源对象读取该属性。

深度数据属性读取

新的 mData 提供了比从扁平对象读取信息的更多灵活性。使用标准的 JavaScript 点分对象表示法，您可以读取深度嵌套的属性和数组。例如，您可能有一个类似这样数据源

[
    { "server": "Orion",
      "location": "London",
      "details": [
            "GMT",
            "10.0.0.1"
        ]
    },
    { "server": "Saturn",
      "location": "New York",
      "details": [
            "EST",
            "10.0.1.1"
        ]
    }
]

本例中有一个嵌套数组，其中第一元素是服务器所在时区，第二元素是服务器的 IP 地址。若要在四列 DataTable 中显示此数据，您可以使用以下 DataTables 初始化

$('#example').dataTable( {
    "aoColumns": [
        { "mData": "server" },
        { "mData": "location" },
        { "mData": "details.0" },
        { "mData": "details.1" }
    ]
} );

本例中，您可以看到第三列引用 details 数组的第一元素（即，在 JavaScript 中，您会编写 row['details'][0]。数据嵌套的深度没有限制（虽然显然嵌套越深需要的处理就越多——DataTables 针对三个以下级别的嵌套进行了优化，以确保它们尽可能快）。

其他示例和讨论

DataTables 包含此增强后的数据处理如何使用的若干示例

我希望您发现此文章在您使用 DataTables 时很有用！论坛中对此文章有评论和讨论的主题。