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
- 无版权服务器 荷兰服务器 VPS underhost全球[VPS测评]
- 做站必选 腾讯云秒杀最后一天→国内 1G 套餐 99 元 年 新加坡 1全球[VPS测评]
- ServerStadium→$13.5 月-Dual L5420 16G全球[VPS测评]
- [11.11]KVMLA 香港 日本 新加坡年付 6 折 月付 8 折日本VPS[主机]
- VirMach→$37 月 E3-16G-1T 美国低价服务器租用美国VPS[主机]
- PHP 判断是否是手机等移动设备的方法全球[VPS测评]
- 大盘鸡 servarica→加拿大 GPU VPS $15 月 AMD 全球[VPS测评]
- Aoyouhost→德国 CN2 日本软银 香港 CN2 圣何塞 CN2日本VPS[主机]
- 线路一般-SnowVPS→$18 年 2T 流量 美国芝加哥服务器美国VPS[主机]
- FastCache→有香港直连节点 100GB 通用流量包 18.8 元香港VPS[主机]
- 搬瓦工最便宜的 CN2 GIA VPS 补货,2.5Gbps 超大带宽,全球[VPS测评]
- 促销 死海网络→洛杉矶 CN2 GIA 线路月付直降 50 元 圣何塞不全球[VPS测评]
- centos6 安装 transmission+flexget 实现 P全球[VPS测评]
- 正确看待域名是否需要添加 www 前缀,对SEO有何影响?全球[VPS测评]
- WordPress插件:Add-Document-Pages为你的网站增全球[VPS测评]
- Wikihost(idc.wiki) → 日本CN2 去程163回程C日本VPS[主机]
- tudcloud,香港沙田大带宽vps特惠7折,CN2+BGP直连,10香港VPS[主机]
- 2.45亿、成都公安(大数据基座-服务器)采购:神码、虹信、海康、超聚变全球[VPS测评]
- 港口雄开万里流丨不出国门海淘全球青岛跨境电商未来可期全球[VPS测评]
- 创新互联:免备案美国香港云主机4核2G仅558元/月,5580元/年美国VPS[主机]
- 什么是linux面板?常见的Linux控制面板有哪些?全球[VPS测评]
- 免备案服务器对权重和网站排名有影响吗?全球[VPS测评]
- 恒创科技:香港/美国云服务器2折起,年度特价低至13元/月,新购送京东E美国VPS[主机]
- RAKsmart:1核1GB/40GB空间/不限流量/15Mbps/KV虚拟空间(主机)
- 网站迁移服务器是如何运作的?新手站长看完这篇文章,很容易就能看完。全球[VPS测评]
- 悦智网络:香港cn2 VPS阿里云线路,四川德阳高防vps,大连高防vp香港VPS[主机]
- wordpress 上传附件报错 “抱歉,出于安全的考虑,不支持此文件类全球[VPS测评]
- 亿速云双12年终回馈:云服务器2折活动,订单满100元减50元全球[VPS测评]
- 阿里云香港服务器速度怎么样?阿里云香港vps稳定不稳定?香港VPS[主机]
- tudcloud,香港vps终身八折$7.76/月起,1核1G内存,香港香港VPS[主机]
转载请注明原文地址:http://140.238.13.167:12355/read-214305.html











