wpDataTables 内置了丰富的列类型,能让同一张表格里的不同数据各得其所:文本、整数、货币、百分比、日期、时间、日期时间、邮箱、图片等都能以最贴合自身的方式展示。货币列可加 ¥ 前缀,百分比列可加 % 后缀,并都支持自定义小数位;图片列则直接在单元格内渲染缩略图,邮箱列可识别为可点击地址。
下面这张实时表格汇集了上述所有列类型,您可以直接体验每种类型在显示、排序与筛选上的差异:数值与日期按大小和时序排序,文本与邮箱按字典序排列,并为每一列提供与其类型相匹配的筛选器。
全部列类型展示
| 姓名 | 部门 | 月薪 | 奖金比例 | 入职日期 | 打卡时间 | 最后登录 | 邮箱 | 头像 | 城市 | 绩效分 |
|---|---|---|---|---|---|---|---|---|---|---|
| 赵敏 | 人事部 | 18,717.00 | 30.00 | 2018-05-17 | 10:07 AM | 2026-06-21 09:44 AM | emp1@example.com | 北京 | 100 | |
| 钱进 | 财务部 | 17,343.00 | 24.00 | 2021-06-20 | 10:54 AM | 2026-06-01 04:41 PM | emp2@example.com | 武汉 | 84 | |
| 孙悦 | 财务部 | 14,463.00 | 5.00 | 2018-11-08 | 10:03 AM | 2026-06-03 12:33 PM | emp3@example.com | 深圳 | 48 | |
| 周强 | 人事部 | 27,194.00 | 13.00 | 2020-06-28 | 09:32 AM | 2026-06-22 08:17 AM | emp4@example.com | 武汉 | 97 | |
| 吴磊 | 销售部 | 31,810.00 | 25.00 | 2022-01-18 | 09:05 AM | 2026-06-03 06:39 PM | emp5@example.com | 成都 | 90 | |
| 郑爽 | 财务部 | 34,399.00 | 13.00 | 2025-11-18 | 09:56 AM | 2026-06-24 05:33 PM | emp6@example.com | 深圳 | 81 | |
| 冯巩 | 研发部 | 9,569.00 | 8.00 | 2023-12-13 | 08:08 AM | 2026-06-22 02:17 PM | emp7@example.com | 成都 | 48 | |
| 陈坤 | 人事部 | 35,795.00 | 24.00 | 2021-04-05 | 09:22 AM | 2026-06-03 05:16 PM | emp8@example.com | 深圳 | 80 | |
| 褚明 | 研发部 | 37,815.00 | 5.00 | 2021-06-27 | 10:09 AM | 2026-06-14 08:16 PM | emp9@example.com | 深圳 | 45 | |
| 卫东 | 财务部 | 27,164.00 | 7.00 | 2019-11-22 | 10:09 AM | 2026-06-24 05:45 PM | emp10@example.com | 深圳 | 56 | |
| 蒋雯 | 财务部 | 30,740.00 | 23.00 | 2025-02-09 | 10:20 AM | 2026-06-14 01:12 PM | emp11@example.com | 深圳 | 87 | |
| 沈腾 | 市场部 | 34,676.00 | 6.00 | 2019-06-02 | 10:10 AM | 2026-06-14 03:25 PM | emp12@example.com | 成都 | 44 | |
| 韩梅 | 销售部 | 11,924.00 | 24.00 | 2019-10-23 | 08:19 AM | 2026-06-26 10:32 AM | emp13@example.com | 成都 | 57 | |
| 杨幂 | 销售部 | 8,402.00 | 26.00 | 2025-04-20 | 10:02 AM | 2026-06-27 09:49 AM | emp14@example.com | 成都 | 47 | |
| 朱军 | 研发部 | 10,461.00 | 24.00 | 2021-08-25 | 08:40 AM | 2026-06-27 02:49 PM | emp15@example.com | 北京 | 68 | |
| 秦岚 | 市场部 | 29,531.00 | 11.00 | 2019-11-06 | 08:26 AM | 2026-06-03 06:18 PM | emp16@example.com | 成都 | 85 | |
| 尤勇 | 研发部 | 14,914.00 | 17.00 | 2019-08-20 | 10:26 AM | 2026-06-03 08:08 PM | emp17@example.com | 上海 | 43 | |
| 许晴 | 市场部 | 44,187.00 | 25.00 | 2023-08-26 | 08:38 AM | 2026-06-11 03:58 PM | emp18@example.com | 上海 | 77 | |
| 何炅 | 人事部 | 38,951.00 | 20.00 | 2022-10-21 | 10:48 AM | 2026-06-04 11:37 AM | emp19@example.com | 上海 | 57 | |
| 吕燕 | 财务部 | 31,135.00 | 27.00 | 2022-07-09 | 10:29 AM | 2026-06-13 04:42 PM | emp20@example.com | 成都 | 85 | |
| 施特 | 财务部 | 12,740.00 | 30.00 | 2018-05-21 | 08:29 AM | 2026-06-20 08:15 AM | emp21@example.com | 上海 | 70 | |
| 张杰 | 研发部 | 37,116.00 | 14.00 | 2025-06-04 | 08:06 AM | 2026-06-22 10:19 AM | emp22@example.com | 上海 | 95 | |
| 孔雪 | 人事部 | 13,910.00 | 19.00 | 2024-10-28 | 08:25 AM | 2026-06-23 08:57 PM | emp23@example.com | 北京 | 85 | |
| 曹operator | 研发部 | 40,077.00 | 20.00 | 2024-03-25 | 10:06 AM | 2026-06-14 12:58 PM | emp24@example.com | 上海 | 47 | |
| 姓名 | 部门 | 月薪 | 入职日期 | 邮箱 | 城市 | 绩效分 |
- 货币与百分比列建议通过”前缀/后缀 + 小数位”来配置,例如 ¥ 前缀、% 后缀,统一保留两位小数可让数据更整齐易读。
- 图片列只需填入图片地址即可自动渲染为缩略图,适合展示商品图、头像等视觉信息,无需额外编写 HTML。
- 日期、时间、日期时间列请按真实数据类型设置,系统会据此提供按时序的排序与日期范围筛选,避免被当作纯文本处理。
- 每种列类型都会自动匹配对应的筛选器(数值用区间、文本用关键词、日期用范围等),按数据特性选择类型即可获得最合适的交互。
- 本页使用的短代码: