Bootstrap-table 服务端分页无效以及服务端分页后不显示页码的解决方法
![]() | ![]() | ![]() | ![]() |
| 【性价之王】 | 【线路之王】 | 【价格之王】 | 【配置之王】 |
| 【免费之王】 | 【香港首推】 | 【梯子之王】 | 【独服之王】 |

Bootstrap-table 是一款由国人开发的功能非常非常强大的表格插件,强烈推荐各位小伙伴们使用,最近在使用 Bootstrap-table 过程中发现分页方式设置为服务端后无法加载数据以及正确分页了,经过阅读文档发现,Bootstrap-table 客户端分页和服务端分页模式要求返回的数据格式是不一样的。
客户端分页模式只要返回 json 格式的数据数组即可,而服务端分页的时候除了要返回数据数组以外还要返回 total,即总记录数。
客户端分页方式返回数据格式:
[{"id":20170004,"name":"测试活动系部","description":"所属系部活动","begin_time":1501516800,"end_time":1504281600,"create_time":0,"score":0.1,"level":"系级","type_id":"创新创业","department_id":2,"sid":17160100,"aid":20170004,"time":1504751546},{"id":20170002,"name":"学院军训","description":"学院 2017 年军训,大学生志愿者。","begin_time":1504195200,"end_time":1504281600,"create_time":0,"score":0.2,"level":"校级","type_id":"社会实践","department_id":1,"sid":17160100,"aid":20170002,"time":1504676795},{"id":20170001,"name":"学院迎新","description":"学院 2017 年迎新活动,大学生志愿者。","begin_time":1504195200,"end_time":1504281600,"create_time":0,"score":0.5,"level":"校级","type_id":"工作履历","department_id":1,"sid":17160100,"aid":20170001,"time":1504751546}]服务端分页方式返回数据格式:
{"total":4,"rows":[{"id":20170001,"name":"学院迎新","description":"学院 2017 年迎新活动,大学生志愿者。","begin_time":1504195200,"end_time":1504281600,"create_time":0,"score":0.5,"level":"校级","type_id":"工作履历","department_id":1,"sids":"","count":0},{"id":20170002,"name":"学院军训","description":"学院 2017 年军训,大学生志愿者。","begin_time":1504195200,"end_time":1504281600,"create_time":0,"score":0.2,"level":"校级","type_id":"社会实践","department_id":1,"sids":"","count":0},{"id":20170003,"name":"测试活动已过期","description":"已过期活动","begin_time":1504195200,"end_time":1504972800,"create_time":0,"score":0.2,"level":"校级","type_id":"志愿公益","department_id":1,"sids":"","count":0},{"id":20170004,"name":"测试活动系部","description":"所属系部活动","begin_time":1501516800,"end_time":1504281600,"create_time":0,"score":0.1,"level":"系级","type_id":"创新创业","department_id":2,"sids":"","count":0}]}加上 total 后服务端分页模式正常加载了数据,但是却无法正常加载页码,原因是我获 total 的时候是直接使用 count 方法获取了单次查询的结果数组的记录数,而实际上 total 应该是全部符合条件的记录数。改正 total 之后页码显示正常,到此 Bootstrap-table 服务端分页无效以及服务端分页后不显示页码的问题解决。
猜你可能想看的VPS
- 实惠稳定 搬瓦工→新增 10Gbps 带宽的 cn2 gia 线路 VP全球[VPS测评]
- 智商税-新睿云免费云服务器→国内 4 核 8G 5M 带宽云服务器免费一全球[VPS测评]
- ioZoom→5 美元 KVM 1GB 20GB SSD 1TB 10G全球[VPS测评]
- 阿里云 - 8 月 ECS 限量抢 2C8G5M 三年付 3000 元全球[VPS测评]
- 促销 标准互联→圣何塞 CN2 GIA 年付 300 元 洛杉矶 CN2全球[VPS测评]
- 特价服务器 $87.2 月 16G 内存 2TB 硬盘 10T 流量 5全球[VPS测评]
- hostodo→$40 年 送 DirectAdmin KVM 2G 内全球[VPS测评]
- RAKsmart→圣何塞 G 口不限服务器低至每月 199 美元 买 1全球[VPS测评]
- 小伞云→5 元 月 256MB 内存 3GB 空间 5GB 流量 5Mb虚拟空间(主机)
- HostKvm→$7.6 月 KVM-2GB 20GB 600GB 香港香港VPS[主机]
- HostDare→VPS 全场 85 折优惠 CN2 CN2 GIA 线全球[VPS测评]
- ThinkPHP5 在 Nginx 下面报 404 错误的解决办法全球[VPS测评]
- 全世界最便宜的域名注册商 Porkbun .com 域名首年付4.15刀全球[VPS测评]
- 搬瓦工VPS面板新增Mount ISO内置100+系统镜像 附安装Gno全球[VPS测评]
- ZJI 双十一 充值送 香港高防五折 阿里云香港线路立减270元香港VPS[主机]
- VPSnet.com立陶宛便宜vps,€1.99起/月-基于Virtuo全球[VPS测评]
- 2021搬瓦工日本软银JPOS_1机房测评,CN2扩容后移动/电信/联通日本VPS[主机]
- OG协议对博客Google SEO优化有什么帮助?全球[VPS测评]
- 狗云dogyun香港便宜vps春节促销,2G内存/BGP优化/20Mbp香港VPS[主机]
- HostHatch 大容量VPS 1G 1T HDD 2T $5 月全球[VPS测评]
- 九零云怎么样?香港将军澳VPS,美国圣何塞VPS 2核1G10M 47/美国VPS[主机]
- RFCHost:1核1G洛杉矶vps/15GB空间/1TB流量/KVM/虚拟空间(主机)
- 咖啡主机:新上香港云服务器、美国CN2轻量级KVM vps,香港15.6美国VPS[主机]
- 宝塔面板怎么放行端口?宝塔面板放行端口的方法全球[VPS测评]
- 阿里云香港服务器速度怎么样?阿里云香港vps稳定不稳定?香港VPS[主机]
- VPS成立BurjeelHoldings全球[VPS测评]
- 硅云服务器拼团活动:香港云服务器1核1G,拼团价仅98元/年香港VPS[主机]
- SugarHosts:虚拟主机三折起,VPS五折起,续费也可以享受优惠全球[VPS测评]
- 硅云香港云服务器促销活动:CPU性能100%性能,无需备案香港VPS[主机]
- 中国云计算,能啃的只剩硬骨头了全球[VPS测评]
转载请注明原文地址:http://140.238.13.167:12355/read-214305.html











