博客

在 DataTables 博客上，您将找到有关 DataTables 及其扩展套件的新闻、公告和教程。

最新文章

2024年9月20日

作者：Allan Jardine -

使用 Editor 实现地址自动完成

在使用Editor构建数据输入表单时，开发人员可以通过多种方式使最终用户的体验更加轻松 - 清晰、简洁、明了的表单是 Editor 的优势之一，但您也可以使用查找和自动完成功能使最终用户更轻松地输入数据。您很有可能在网上注册服务或运送商品时遇到过地址自动完成功能 - 本文将深入探讨如何在 Editor 中实现此功能。

首先，让我们直接跳到一个工作示例，以便您可以看到我们将要构建的内容 - 下面是一个包含三个虚构地址的表格。它与使用 Editor 的常规 DataTable 完全相同（在本例中为本地编辑 - 此示例没有后端数据库）。本文重点关注的是，如果您创建新记录或编辑现有记录 - 第二个字段不是数据字段，而是一个允许用户开始输入地址的输入框，然后将使用优秀的 Geoapify API查找该地址。会向最终用户（在本例中即您！）呈现选项列表，并在他们继续输入时进行筛选，并允许他们点击其中一个选项来自动完成表单中的字段。

姓名	门牌号	街道	城市	州/省	邮政编码	国家
Airi Satou	The Ivies	Glebe Close	伦敦	伦敦	NW11 9TU	英国
Hope Fuentes	392	枫树街	洛杉矶	加利福尼亚州	90017	美国
Serge Baldwin	28	Chemin Du Lavarin Sud	卡昂	下诺曼底	14000	法国

继续阅读...

2024年8月21日

作者：Allan Jardine -

DataTables React 组件

这早就该做了 - 事实证明，React 并非昙花一现（谁知道呢！</sarcasm>），因此，带着一丝欣慰和发布新软件的喜悦，我在这篇文章中发布了 DataTables 的 React 组件。

DataTables 的新 React 组件基本上是现有 DataTables 库的包装器，以 React 用户熟悉的方式呈现它，同时仍然提供 DataTables 的所有功能。

这篇文章将讨论如何安装和使用这个新组件，以便在您的 React 应用程序中获得 DataTables 的好处和用途。还提供了一些示例（例如这个简单的用例），以便您可以亲身体验该组件。

继续阅读...

2024年7月26日

作者：Allan Jardine -

排序顺序插件

我最近收到一位开发人员提出的一个有趣的问题，他希望向最终用户展示在多列排序时应用于 DataTable 的排序顺序的可视化表示。例如，如果您在排序中有两列，则了解 DataTables 使用哪一列进行主要排序，哪一列进行次要排序会很有用。

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 Hurst	Javascript 开发人员	旧金山	$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 Bruce	Javascript 开发人员	新加坡	$183,000
Donna Snider	客户支持	纽约	$112,000