DataTables 2 的新增功能

DataTables 2 是 DataTables 的重大更新，为该库带来各种增强功能。本文件包含有关大多数更重要的新增功能的详细信息。

这是详细说明 DataTables 2 发行版的众多相关文档的一部分

布局和功能

这可能是使用 DataTables 的大多数人都会遇到的情况。定位表格周围的控件元素对于根据您的特定要求定制 UI 非常重要。以前在 DataTables 中使用 dom 选项，这很有效，但这是一个维护噩梦，特别是在使用 Bootstrap 等样式集成时。

因此，DataTables 2 引入一个新 layout 选项，大大简化表格元素定位的工作。它提供了一个位置网格，您可以使用由 top 或 bottom 组成的简单对象键在网格中插入元素，还可以选择添加 Start 或 End。这两者之间可以放置一个数字，以允许进行多行操作。请参阅 layout，了解此功能的可视化表示。

这样做的好处是，我们现在可以使用一个简单的对象键插入元素，例如：

new DataTable('#myTable', {
    layout: {
        topStart: 'buttons'
    }
});

此外，这带来了 DataTables 中的“功能”。每个控件元素都是向 DataTables 注册的“功能”，并且可以在 layout 对象中单独配置，而不是依赖于顶级配置对象。DataTables 具有四个内置功能：info、pageLength、paging 和 search。扩展可以添加 buttons 和 searchBuilder 等功能。

假设您可能需要在表格周围添加多个按钮组。这对于 DataTables 2 来说简直易如反掌

new DataTable('#myTable', {
    layout: {
        topStart: {
            buttons: [ 'create', 'edit', 'remove' ]
        },
        topEnd: {
            buttons: [ 'excel', 'csv' ]
        }
    }
});

通过 DataTable.feature.register() 方法，可以轻松创建可与 layout 一起使用的新功能。当我为 DataTables 创建其他插件时，您将在未来的博文中看到更多内容！

搜索

搜索是构建数据可访问性的基本基石，而这正是 DataTables 的全部意义。在为 DataTables 创建搜索组件时，通常需要合并多个自定义过滤器，同时仍为最终用户提供键入其自己的搜索词的能力。通过具有新的固定搜索方法，在 DataTables 中现在变得更加容易

使用这些方法可以创建一个“已命名搜索”，该搜索将与任何其他搜索词一起应用，直到被替换或删除。

除此以外，DataTables API 的搜索功能还得到了极大增强，可以通过传递搜索函数、正则表达式或“智能”搜索字符串来实现。DataTables 的智能搜索功能已得到增强，以支持负面搜索以及通过新的 DataTables.SearchOptions 对象提供的更多选项，该选项提供了诸如 exact、boundary 等选项。

此外，内置搜索现在是不区分变音符号的。即您的数据可以包含带变音符号的字符，您的最终用户输入不带变音符号的字符，它也将匹配。

有关 DataTables 中搜索的更多信息，请参阅搜索的新手册页面。

项目语言

每个 DataTable 都显示特定类型的数据。默认的语言字符串将数据项称为“条目”，但您可以根据正在显示的内容来调整语言字符串以帮助最终用户理解页面上的数据，例如，如果您显示的分页信息是要显示人员列表，您可能希望使用显示第 x 到第 y 的 z 个人。在 DataTables 1 中可以这样做，但您必须调整每个引用通用“条目”术语的语言字符串。

DataTables 2 引入了新的 language.entries 选项，默认语言字符串使用此选项来轻松自定义数据的命名方式。例如，以下内容将自定义 info 和 pageLength 字符串（请注意，它还支持 i18n() 的复数形式，以使您的表格对最终用户感觉更加自然和正确）

new DataTable('#myTable', {
    language: {
        entries: {
            _: 'people',
            1: 'person'
        }
    }
});

标题

caption 标签用于为表格提供标题，现在是 DataTables 中的一等公民，能够使用 caption 在启动时设置标题并使用 caption() 和 caption.node() 在运行时进行更新。

数据类型

对表格中数据的操作在很大程度上取决于要显示的数据的格式和结构，例如，日期的处理方式不同于数字，而数字的处理方式又不同于字符串等。DataTables 始终能够向其中添加额外的数据类型，但执行此操作的 API 已经被分散了。DataTables 2 通过其新的 DataTable.type() 和 DataTable.types() 方法，调和了数据类型控制。

此外，DataTables 中的数据类型处理系统现在还具备自动定义类和呈现检测到的数据类型的能力。这会用于日期和数字的内置数据类型，以提供更自然的数据对齐。

在手册中有一个新章节，更深入地介绍如何控制内置数据类型，以及如何注册您自己的自定义数据类型。例如，以下代码将检测具有 IPv4 格式化数据、应用正确排序并向列添加类的列

DataTable.type('ipv4', {
    detect: function (data) {
        return typeof data === 'string' &&
            data.match(/^((25[0-5]|(2[0-4]|1\d|[1-9]|)\d)\.?\b){4}$/)
                ? 'ipv4'
                : null;
    },
    order: {
        pre: function (data) {
            return Number(
                data
                    .split('.')
                    .map((num, idx) => num * Math.pow(2, (3 - idx) * 8))
                    .reduce((a, v) => ((a += v), a), 0)
            );
        }
    },
    className: 'dt-data-ipv4'
});

准备操作

论坛中经常出现的常见支持问题是在使用 ajax 时，与 API 的交互为何不起作用。答案很简单，Ajax 加载的数据是异步的，因此您的代码需要等待服务器加载数据后才能使用该数据。可以使用 initComplete 来解决此问题，当您知道答案时，这是一件很简单的事，但是如果您是异步编程新手，就会让人很抓狂。

为了帮助解决此问题，并允许在异步和同步加载的表格之间重用代码，DataTables 2 引入了新的 ready() 方法。此函数接受一个参数，并在表格数据准备就绪（如果数据已准备就绪则可能是立即）时执行给定的函数。

考虑

let table = new DataTable('#myTable');
 
table.ready(function () {
    // Actions to take when the table is ready
    // ...
});

和

let table = new DataTable('#myTable', {
    ajax: '/api/data'
});
 
table.ready(function () {
    // Actions to take when the table is ready
    // ...
});

程序结构相同，但是如果表格的数据已完全加载，则只会执行 ready 回调函数。

服务器端 JSON 属性处理

长期以来，DataTables 都可以通过 ajax.dataSrc 选项指定要在 JSON 对象中显示在表格中的数据数组的属性名称。但是，这并未扩展到服务器端处理，因为如果返回的参数名称与 DataTables 预期的不符，您通常需要自己编写 Ajax 调用。

在 v2 中，ajax.dataSrc 已经得到扩展，可以作为对象提供，该对象能够为每个期望的参数单独提供映射。例如，可以使用以下映射

new DataTable('#myTable', {
    ajax: {
        url: '/api/users',
        dataSrc: {
            data: 'results',
            draw: 'request',
            recordsTotal: 'total',
            recordsFiltered: 'filtered'
        }
    },
    serverSide: true
});

列方法

DataTables 2 通过多种新方法扩展了列 API

column().render() / columns().render() - 呈现列数据并返回。完善现有的 cell().render() / cells().render() 方法。
column().orderable() /-api columns().orderable()` - 确定列是否可排序。
column().header(row) /-api columns().header(row)` - 从现有方法扩展，增加获取表头中特定行内容的能力。
column().footer(row) /-api columns().footer(row)` - 与上述相同，但用于表尾。
column().title() /-api columns().titles()` - 获取/设置列标题。
column().type() /-api columns().types()` - 获取为列检测到的数据类型。
column().width() /-api columns().width()` - 获取所选列的宽度。

实用程序方法

DataTables 已经通过 API 提供了许多内部方法，例如 DataTable.util.get() 和 DataTable.util.set()。这些方法现已在 DataTables 2 中得到扩展，添加了以下方法

DataTable.util.stripHtml() - 移除 HTML。还可以提供您自己的解析器，如果您需要比内置正则表达式更准确的结果。
DataTable.util.escapeHtml() - 转义字符串中的 HTML 字符，确保将其安全地注入到文档中。
DataTable.util.unique() - 从提供的数组中获取唯一项。
DataTable.util.diacritics() - 从字符串中移除重音符号。还可以提供一种方式来修改从字符串中移除重音符号的方式，如果内置方法不适合您的需要。

这些方法不是 DataTables 的核心功能，它不像 Lodash 这样的实用程序库，但 DataTables 在内部使用这些方法，它们通常对插件和扩展有用，以帮助鼓励代码重用。

这些只是亮点。DataTables 2 中还有更多新功能，例如改进了对复杂页眉/页脚的支持、元组中的排序规范、其他 CSS 变量等。发行说明有所有新增内容和更改的详细信息。