DataTables
高级交互
功能，用于您的表格。
Editor
全面的编辑
DataTables 库。
手册
下载
≡ 显示网站导航
2024 年 3 月 15 日星期五
作者：Allan Jardine

DataTables 2!

我很高兴地宣布 DataTables 2 正式发布。它的发布已经酝酿了很长时间，部分开发始于 2018 年，但它终于面世了，我认为它对 DataTables 来说是一次巨大的进步，它带来了新的选项、API 方法，以及大量的改进和优化。

什么是 DataTables

如果您正在阅读本文，您很可能已经知道 DataTables 是什么，但以防万一，它是 免费开源 的 Javascript 库，用于增强 HTML 表格。最简单的形式是为任何 HTML 表格添加排序、搜索和分页功能，但它还可以做更多的事情。它的 丰富 API 和 选项 使您可以自定义和控制表格以满足您的需求。它还可以由多个主要的 CSS 框架进行样式化，使其与您的网站/应用程序无缝融合。

DataTables 还提供一系列广泛的 扩展，这些扩展添加了额外的功能，例如 创建导出文件、冻结 标题 和 列 等等。我们还生产 DataTables 编辑器，这是我们的商业软件，它为 DataTables 添加了完整的创建、编辑和删除操作，以及服务器端库，使 CRUD 操作变得简单。

2.0 中的新增功能

DataTables 中有很多小的添加和改进，但也有一些重要的功能可以提高其功能。

  • 新的 layout 选项
  • 改进的搜索功能
  • 条目语言选项

为了讨论以下这些功能，我们将参考以下 DataTable

姓名职位办公室薪资
Tiger Nixon系统架构师爱丁堡$320,800
Garrett Winters会计师东京$170,750
Ashton Cox初级技术作者旧金山$86,000
Cedric Kelly高级 Javascript 开发人员爱丁堡$433,060
Airi Satou会计师东京$162,700
Brielle Williamson集成专家纽约$372,000
Herrod Chandler销售助理旧金山$137,500
Rhona Davidson集成专家东京$327,900
Colleen HurstJavascript 开发人员旧金山$205,500
Sonya Frost软件工程师爱丁堡$103,600
Jena Gaines办公室经理伦敦$90,560
Quinn Flynn支持主管爱丁堡$342,000
Charde Marshall区域总监旧金山$470,600
Haley Kennedy高级营销设计师伦敦$313,500
Tatyana Fitzpatrick区域总监伦敦$385,750
Michael Silva营销设计师伦敦$198,500
Paul Byrd首席财务官 (CFO)纽约$725,000
Gloria Little系统管理员纽约$237,500
Bradley Greer软件工程师伦敦$132,000
Dai Rios人事主管爱丁堡$217,500
Jenette Caldwell开发主管纽约$345,000
Yuri Berry首席营销官 (CMO)纽约$675,000
Caesar Vance售前支持纽约$106,450
Doris Wilder销售助理悉尼$85,600
Angelica Ramos首席执行官 (CEO)伦敦$1,200,000
Gavin Joyce开发人员爱丁堡$92,575
Jennifer Chang区域总监新加坡$357,650
Brenden Wagner软件工程师旧金山$206,850
Fiona Green首席运营官 (COO)旧金山$850,000
Shou Itou区域营销东京$163,000
Michelle House集成专家悉尼$95,400
Suki Burks开发人员伦敦$114,500
Prescott Bartlett技术作者伦敦$145,000
Gavin Cortez团队主管旧金山$235,500
Martena Mccray售后支持爱丁堡$324,050
Unity Butler营销设计师旧金山$85,675
Howard Hatfield办公室经理旧金山$164,500
Hope Fuentes秘书旧金山$109,850
Vivian Harrell财务主管旧金山$452,500
Timothy Mooney办公室经理伦敦$136,200
Jackson Bradshaw总监纽约$645,750
Olivia Liang支持工程师新加坡$234,500
Bruno Nash软件工程师伦敦$163,500
Sakura Yamamoto支持工程师东京$139,575
Thor Walton开发人员纽约$98,540
Finn Camacho支持工程师旧金山$87,500
Serge Baldwin数据协调员新加坡$138,575
Zenaida Frank软件工程师纽约$125,250
Zorita Serrano软件工程师旧金山$115,000
Jennifer Acosta初级 Javascript 开发人员爱丁堡$75,650
Cara Stevens销售助理纽约$145,600
Hermione Butler区域总监伦敦$356,250
Lael Greer系统管理员伦敦$103,500
Jonas Alexander开发人员旧金山$86,500
Shad Decker区域总监爱丁堡$183,000
Michael BruceJavascript 开发人员新加坡$183,000
Donna Snider客户支持纽约$112,000

此表格使用以下选项初始化

new DataTable('#newFeatures', {
    language: {
        entries: {
            _: 'people',
            1: 'person'
        }
    },
    layout: {
        topStart: 'info',
        bottomStart: 'pageLength'
    }
});

布局

表格控件元素的自定义定位，以及其他元素（如 按钮）的添加，可能是最常见的配置选项。在 DataTables 1.x 中，这是通过使用 dom 字符串来实现的，当与 Bootstrap 等样式集成一起使用时，它可能很快变得难以管理。DataTables 2 通过新的 layout 选项解决了这个问题，该选项可用于在通用对象定义中将控件元素放置在表格周围，而与所使用的样式库无关。

在上面的示例中，我已经将表格信息和分页长度控件的位置从其默认位置交换了。这可以通过以下代码非常简单地实现：

layout: {
    topStart: 'info',
    bottomStart: 'pageLength'
}

但是，layout 的实用性并不止于此，它允许以单独的方式配置每个控件元素（在 DataTables 中称为“功能”）。这使得拥有多个功能实例变得非常简单，这对于按钮特别有用 - 例如，您可以使用

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

此外，通过 DataTable.feature.register() 方法，可以轻松创建新的功能以与 layout 一起使用。

最后，对于 layout，这项更改使我能够在 所有示例页面 的顶部添加一个选项，让您选择要查看示例的受支持的样式框架。

搜索

强大的搜索功能对于任何旨在显示大量数据的库来说都是至关重要的，而 DataTables 2 则建立在 DataTables 的现有功能之上。

内置的标准“智能”搜索现在能够通过在搜索词前添加一个感叹号（!）来执行否定搜索。例如，在上面的表格中键入“！伦敦”以删除所有包含“伦敦”的行。此外，现在有选项用于字符串的精确匹配（这对列搜索很有用）和边界搜索（有助于筛选数据包含“男性”和“女性”等词语时）。

API 的搜索功能（search() 和 column().search()）也针对自定义搜索进行了改进。它们现在能够接受一个函数，该函数将对表格的数据执行您自己的自定义搜索逻辑，并直接接受正则表达式。

最后，对于搜索，DataTables 2 引入了通过三种新方法实现的“固定搜索词”概念

通过这些方法，您可以创建一个固定搜索词（通过给定的名称进行索引），该词将与任何其他搜索词一起应用，直到被替换或删除。这使得构建自定义搜索控件（以及 layout 的新功能注册）变得更加容易，因为您不需要担心搜索词冲突和覆盖现有词语。

例如，您可以将以下事件处理程序和搜索应用于 select 元素以筛选表格，同时还让内置的全局搜索 input 能够让最终用户输入自由格式的搜索词

$('#mySelect').on('change', function () {
  table.search.fixed('select', $(this).val());
});

条目

DataTables 2 引入了新的 language.entries 选项，用于自定义 DataTables 用于控件功能（例如页面长度和信息显示元素）的语言字符串。虽然这是一个相对较小的更改，但当最终用户能够扫描数据时，它可以大大提高表格的相关性 - 而不是看到通用的“条目”字符串，他们可以立即看到表格包含的数据类型。

在上面的示例中，使用了以下代码：

language: {
    entries: {
        _: 'people',
        1: 'person'
    }
}

请注意，它还使用了 i18n() 方法支持复数的功能，因此如果只显示单个结果，它将被称为单数词语，而不是错误地使用复数。尝试在上面的表格中搜索一个唯一词语，以查看此功能的实际操作。

更多...

这篇博文只是简单地介绍了 DataTables 2 的新功能。有关更多详细信息，请参阅

升级

想要升级？太好了！升级非常容易。如果您使用的是 npm、yarn 或其他包管理器，请更新您的依赖项以使用 DataTables 2（^2 可能是有用的 semver 版本字符串）。如果您使用的是我们的 CDN 或已下载的包，请使用 下载生成器 生成新的 CDN 链接/下载包（如果您检查当前构建的 Javascript 源文件，您将在文件顶部看到一个注释中的 URL，它将确保您获得相同的软件，只是最新的版本）。

如果您直接使用 DataTables（即 jquery.dataTables.js 文件），请注意该文件的名称已更新为 dataTables.js。同样，核心样式文件名称也已更新以与其他样式文件名称保持一致，为 dataTables.dataTables.css

CSS
JS

类名称

DataTables 用于向表格添加元素的类名已更新，以实现更一致且更合理（与以前的版本不同！）。DataTables 1.x 的类名随着时间的推移而积累，有点杂乱无章。现在，它们的命名方式更加一致。它们将以 dt- 开头，以表明它们是 DataTables 特定的。

如果您以前使用过旧的 DataTables 类名进行自定义样式设置，则需要更新您的 CSS 以使用新名称。

已移除

发布主要新版本为库提供了机会来移除旧版代码和接口，以保持库的可管理性，尤其是在 Javascript 库中，尽可能小巧。这必须与向后兼容性的需求相平衡，并尽可能使软件升级过程变得轻松。

考虑到这一点，DataTables 2 中有两个主要移除项：旧版 API 和旧的 deferLoading 选项。

旧版 API 在 2014 年发布 DataTables 1.10 时被 当前 DataTables API 取代（回想起来，它应该被称为 DT2！）。它保留在代码库中以允许升级，但从那时起就被标记为已弃用，并且仅在旧版页面上进行了记录。旧版 API 容易通过其所有方法的 fn 前缀识别 - 例如 fnDraw、fnAddData 等。

旧版 API 虽然是现代 API 的抽象层，但仍然占用大量代码，现在已被移除。如果您使用过它，则现在必须将您的代码更新为现代 API。

另一个值得注意的移除是 deferLoading 选项，该选项允许 DataTables 跳过第一次绘制，假设您已执行所有初始搜索和排序操作以显示第一页数据。这在搜索引擎无法执行 Javascript 的时代非常有用，但它们早已过去，而且很少有 DataTables 安装使用此选项，因为它设置起来比较复杂。它还存在大量边缘情况（状态保存等），因此是时候将其移除。

还有一些其他较小的移除，请 参考 DataTables 2 升级说明了解详情。

扩展版本

不仅 DataTables 从此主要版本中受益，许多 DataTables 扩展也已更新，以利用其新功能，特别是多行标题支持。

  • Buttons 3：现在完全支持多行和复杂标题和页脚，用于导出数据。 发布说明.
  • ColReorder 2：完全重写，对代码库进行了现代化改造，使其更小，更易于管理。还完全支持多行和复杂标题/页脚。 发布说明.
  • FixedColumns 5：在滚动时显示固定列的阴影，以帮助视觉分离。还支持多行和复杂标题/页脚。 发布说明.
  • FixedHeader 4：支持多行和复杂标题/页脚。 发布说明.
  • Responsive 3：与其他扩展一样，Responsive 现在也完全支持多行和复杂标题/页脚。它还引入了一种新的渲染器，它将重用 DOM 元素，而不是为详细信息显示创建新元素。 发布说明.
  • Select 2：引入支持使用真正的复选框选择行，而不是 CSS 绘制的复选框，以帮助提高可访问性。还可以选择在复选框列中全选/全不选。 发布说明.

其他扩展也已更新，以确保与 DataTables 2 完全兼容。

与 DataTables 核心一样，请使用您的包管理器（npm、yarn 等）或 下载构建器，以确保您获得 DataTables 软件套件的最新版本。

完整升级说明

这不是更改的完整列表，而只是主要要点。有关完整详细信息，请参阅

支持

DataTables 1.x 现在被视为生命周期结束。如果有需要，将发布补丁版本，但所有开发重点都放在 DataTables 2+ 上，不会向 1.x 引入新功能，也不会向后移植。对于需要 DataTables 2+ 的扩展也是如此，而其他可以在 DataTables 1 和 2 上运行的扩展将专门关注 DataTables 2，并将在一阶段放弃对 DataTables 1 的支持（当发生这种情况时，它们将获得主要版本升级）。

商业支持服务 将继续涵盖 DataTables 1.13 作为之前的次要版本，直到 DataTables 2.1 发布。但是，在 论坛 中提供的免费支持将重点转移到 DataTables 2 上，如果您遇到旧版本的问题，我们将鼓励您进行升级。

浏览器

对于像 DataTables 这样的库来说，广泛的浏览器支持非常重要。您希望能够选择一个库，并知道它将在您的客户使用的浏览器上正常运行，而无需担心兼容性问题。以前，我将基线设置为 DataTables 每次次要版本发布时（semver 意义上的次要版本 - 一些版本，例如 1.10，是重大升级！）的特定版本的 Internet Explorer（6、8、11 等）。

自 DataTables 首次问世以来，浏览器格局发生了变化 - IE 已经消亡，浏览器定期自动更新，因此您知道大多数客户将拥有最新最好的功能。“大多数”很重要，浏览器版本的长尾仍然可以摆动（具有旧操作系统的计算机、旧版平板电脑等），如上所述，您需要确保您使用的库具有广泛的浏览器支持。

为此，DataTables 浏览器支持现在针对的是每个 DataTables 次要版本系列发布日期前 10 年发布的主要浏览器。

jQuery

DataTables 2 只有一个依赖项 - jQuery。它使用 jQuery 作为 DOM 抽象和事件处理库。正如 DataTables 用作库来处理 HTML 表格一样，它使用 jQuery 大大简化了与 DOM 和事件的交互。如果没有使用 jQuery，我将需要编写类似的 DOM 抽象，这只会占用核心 DataTables 开发的时间，而且我认为不太可能显著地提高代码大小，尤其是使用 jQuery slim 和即将发布的 jQuery 4 版本。jQuery 是经过实战检验的库，也是 DataTables 能够提供如此广泛的浏览器支持的重要原因之一。

需要明确的是 - 您不需要编写任何 jQuery 代码来使用 DataTables。我们现在所有的示例都有 Vanilla JS 和 jQuery 运行时代码，以向您展示如何使用任一方法。参考文档侧重于 Vanilla JS。

未来

软件很少被认为是“完成”的，DataTables 离这个目标还很远。我对 DataTables 及其扩展有很多计划，包括改进的列控制、过滤选项、性能、与 React 的集成等等。事实上，我已经为 DataTables 3 功能记录了问题！请关注本博客（RSS 提要）或 DataTables BlueSky 帐户，以了解最新进展。

我从 2008 年就开始开发 DataTables，现在 16 年过去了，我为它所取得的成就和围绕它发展起来的社区感到高兴和自豪。我最希望的是继续迭代和开发 DataTables，以满足使用它的开发人员的需求。欢迎您对 DataTables 2 以及总体反馈 - 请随时 在论坛中创建主题，讨论您可能遇到的任何想法、问题或反馈。

页面导航

DataTables

DataTables 由 SpryMedia Ltd 设计和创建。
© 2007-2024 MIT 许可。 隐私政策。 支持者.
SpryMedia Ltd 在苏格兰注册，公司编号为 SC456502。