添加高级交互控件
到您的 HTML 表格中 免费且简单的方式

1 包含这两个文件
CSS
JS
2 初始化您的 DataTable:
let table = new DataTable('#myTable');
1 安装 DataTables
npm install datatables.net-dt
2 导入 DataTables 并初始化
import DataTable from 'datatables.net-dt';

let table = new DataTable('#myTable');
3 您将获得一个完全交互式的表格

完整入门指南

姓名职位办公地点年龄入职日期薪资
Tiger Nixon系统架构师爱丁堡612011-04-25$320,800
Garrett Winters会计东京632011-07-25$170,750
Ashton Cox初级技术作家旧金山662009-01-12$86,000
Cedric Kelly高级 JavaScript 开发人员爱丁堡222012-03-29$433,060
Airi Satou会计东京332008-11-28$162,700
Brielle Williamson集成专家纽约612012-12-02$372,000
Herrod Chandler销售助理旧金山592012-08-06$137,500
Rhona Davidson集成专家东京552010-10-14$327,900
Colleen HurstJavaScript 开发人员旧金山392009-09-15$205,500
Sonya Frost软件工程师爱丁堡232008-12-13$103,600
Jena Gaines办公室经理伦敦302008-12-19$90,560
Quinn Flynn支持主管爱丁堡222013-03-03$342,000
Charde Marshall区域总监旧金山362008-10-16$470,600
Haley Kennedy高级营销设计师伦敦432012-12-18$313,500
Tatyana Fitzpatrick区域总监伦敦192010-03-17$385,750
Michael Silva营销设计师伦敦662012-11-27$198,500
Paul Byrd首席财务官 (CFO)纽约642010-06-09$725,000
Gloria Little系统管理员纽约592009-04-10$237,500
Bradley Greer软件工程师伦敦412012-10-13$132,000
Dai Rios人事主管爱丁堡352012-09-26$217,500
Jenette Caldwell开发主管纽约302011-09-03$345,000
Yuri Berry首席营销官 (CMO)纽约402009-06-25$675,000
Caesar Vance售前支持纽约212011-12-12$106,450
Doris Wilder销售助理悉尼232010-09-20$85,600
Angelica Ramos首席执行官 (CEO)伦敦472009-10-09$1,200,000
Gavin Joyce开发人员爱丁堡422010-12-22$92,575
Jennifer Chang区域总监新加坡282010-11-14$357,650
Brenden Wagner软件工程师旧金山282011-06-07$206,850
Fiona Green首席运营官 (COO)旧金山482010-03-11$850,000
Shou Itou区域营销东京202011-08-14$163,000
Michelle House集成专家悉尼372011-06-02$95,400
Suki Burks开发人员伦敦532009-10-22$114,500
Prescott Bartlett技术作家伦敦272011-05-07$145,000
Gavin Cortez团队领导旧金山222008-10-26$235,500
Martena Mccray售后支持爱丁堡462011-03-09$324,050
Unity Butler营销设计师旧金山472009-12-09$85,675
Howard Hatfield办公室经理旧金山512008-12-16$164,500
Hope Fuentes秘书旧金山412010-02-12$109,850
Vivian Harrell财务总监旧金山622009-02-14$452,500
Timothy Mooney办公室经理伦敦372008-12-11$136,200
Jackson Bradshaw总监纽约652008-09-26$645,750
Olivia Liang支持工程师新加坡642011-02-03$234,500
Bruno Nash软件工程师伦敦382011-05-03$163,500
Sakura Yamamoto支持工程师东京372009-08-19$139,575
Thor Walton开发人员纽约612013-08-11$98,540
Finn Camacho支持工程师旧金山472009-07-07$87,500
Serge Baldwin数据协调员新加坡642012-04-09$138,575
Zenaida Frank软件工程师纽约632010-01-04$125,250
Zorita Serrano软件工程师旧金山562012-06-01$115,000
Jennifer Acosta初级 JavaScript 开发人员爱丁堡432013-02-01$75,650
Cara Stevens销售助理纽约462011-12-06$145,600
Hermione Butler区域总监伦敦472011-03-21$356,250
Lael Greer系统管理员伦敦212009-02-27$103,500
Jonas Alexander开发人员旧金山302010-07-14$86,500
Shad Decker区域总监爱丁堡512008-11-13$183,000
Michael BruceJavaScript 开发人员新加坡292011-06-27$183,000
Donna Snider客户支持纽约272011-01-25$112,000
姓名职位办公地点年龄入职日期薪资

DataTables JavaScript 表格库

高级表格,即时生成

DataTables 是一个 JavaScript HTML 表格增强库。它是一个高度灵活的工具,建立在渐进增强基础之上,可以为任何 HTML 表格添加所有这些高级功能。

分页
上一页、下一页和页面导航。
即时搜索
通过文本搜索过滤结果。
多列排序
一次根据多列对数据进行排序。
使用您喜欢的框架
ReactVue 集成。
易于主题化
DataTables 默认、Bootstrap 3/4/5BulmaSemantic UI
各种各样的 扩展:
移动友好
表格适应视口大小。
完全可国际化
轻松地 将 DataTables 翻译 成多种语言。
免费开源软件
还有更多 - 查看完整的示例列表...

您拥有强大的公司支持

DataTables 被这些优秀公司的用户使用。

Company logos

使用 DataTables 的 Editor 在几分钟内创建自定义的可编辑表格

节省您编写另一个 CRUD 应用程序的时间 - Editor 是一个高级扩展,旨在创建复杂的、完全可编辑的表格,充分利用 DataTables 的所有功能。

详细了解 Editor

有什么新消息?

来自 DataTables 博客和网络的最新消息。

DataTables 博客 网络资讯

发布 (RSS) 博客 (RSS) BlueSky