全列类型展示

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。
  • 日期、时间、日期时间列请按真实数据类型设置,系统会据此提供按时序的排序与日期范围筛选,避免被当作纯文本处理。
  • 每种列类型都会自动匹配对应的筛选器(数值用区间、文本用关键词、日期用范围等),按数据特性选择类型即可获得最合适的交互。
  • 本页使用的短代码: