本页演示 wpDataTables 的服务端处理(Server-side processing)能力。开启该模式后,表格的分页、排序与筛选都会交由数据库端完成,浏览器每次只加载当前页的数据,而不是把整张表一次性塞进页面。
下面这张表格共有 5000 行真实数据。无论你翻页、点击列标题排序,还是输入关键词筛选,请求都会发送到服务器,由数据库返回对应的那一小部分结果。正因如此,即便数据量从几万行增长到上百万行,页面依旧能够保持流畅响应。
大数据 · 服务端处理
| 交易日期 | 地区 | 产品 | 类别 | 金额 | 数量 | 客户 |
|---|---|---|---|---|---|---|
| 2026-06-18 | 华北 | 移动电源 | 家居 | 3,787.00 | 47 | cust1@example.com |
| 2026-03-27 | 西南 | U盘 | 食品 | 6,753.00 | 35 | cust2@example.com |
| 2026-02-07 | 华中 | LED台灯 | 电子产品 | 7,515.00 | 33 | cust3@example.com |
| 2026-02-10 | 华东 | 机械键盘 | 家居 | 9,961.00 | 21 | cust4@example.com |
| 2026-05-15 | 华北 | 笔记本电脑 | 电子产品 | 7,325.00 | 9 | cust5@example.com |
| 2026-06-27 | 西南 | LED台灯 | 家居 | 8,147.00 | 30 | cust6@example.com |
| 2026-05-20 | 华南 | LED台灯 | 家居 | 1,578.00 | 3 | cust7@example.com |
| 2026-03-08 | 西南 | 机械键盘 | 办公用品 | 5,024.00 | 39 | cust8@example.com |
| 2026-01-05 | 华中 | 机械键盘 | 食品 | 5,130.00 | 2 | cust9@example.com |
| 2026-02-20 | 华中 | LED台灯 | 电子产品 | 4,329.00 | 26 | cust10@example.com |
| 2026-06-28 | 华中 | 蓝牙耳机 | 电子产品 | 7,608.00 | 22 | cust11@example.com |
| 2026-01-02 | 西南 | 保温杯 | 电子产品 | 1,482.00 | 27 | cust12@example.com |
| 2026-02-22 | 华中 | 蓝牙耳机 | 服饰 | 9,641.00 | 23 | cust13@example.com |
| 2026-06-16 | 华东 | 机械键盘 | 食品 | 3,957.00 | 21 | cust14@example.com |
| 2026-01-11 | 西南 | 移动电源 | 家居 | 9,319.00 | 49 | cust15@example.com |
| 2026-06-12 | 华北 | 机械键盘 | 电子产品 | 4,869.00 | 40 | cust16@example.com |
| 2026-04-08 | 华东 | 27寸显示器 | 家居 | 5,877.00 | 30 | cust17@example.com |
| 2026-06-26 | 华北 | 人体工学椅 | 家居 | 4,883.00 | 21 | cust18@example.com |
| 2026-03-16 | 华中 | 笔记本电脑 | 电子产品 | 3,511.00 | 37 | cust19@example.com |
| 2026-04-07 | 华中 | 蓝牙耳机 | 服饰 | 2,953.00 | 13 | cust20@example.com |
| 交易日期 | 地区 | 产品 | 类别 | 金额 | 数量 | 客户 |
- 面对大数据集时建议开启服务端处理,避免一次性把全部数据渲染到前端,显著降低浏览器内存占用与首屏加载时间。
- 排序、筛选、分页全部在数据库端执行,请确保数据源对应的查询字段建立了合适的索引,以获得最佳响应速度。
- 合理设置每页显示的行数:单页行数越少,单次请求返回的数据越精简,翻页体验越顺滑。
- 该模式特别适合数万到上百万行的海量数据;对仅有几十、上百行的小表,使用普通的客户端模式反而更轻便。
- 本页使用的短代码: