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
- 劳动节 aquanx→美国硅谷机房 独立服务器 $39 月起 100M 独立服务器[U]
- 补货通知 hostflyte→CN2 线路 1G 内存 1T 流量半年付全球[VPS测评]
- 线路不行-1GServers 凤凰城 E3-1230v2 8G 1TB 独立服务器[U]
- 疯狂猜成语 图猜成语一颗心指着另外一颗心是什么成语?全球[VPS测评]
- nginx 强制下载 txt 文件 nginx 禁止浏览器直接打开 tx全球[VPS测评]
- PHP 防止 XSS 注入解决方案大全全球[VPS测评]
- 促销 NexusBytes→VPS 季付 68 折优惠 可选洛杉矶 纽约全球[VPS测评]
- 1GServers→$29 月-E3 1270v2 8G 2*1TB 2全球[VPS测评]
- Vultr 网络星期一→高性价比按小时计费商家 日本机房 新注册送$10日本VPS[主机]
- servercheap→$2 月 不限流量 VPS KVM 1G 内存 全球[VPS测评]
- IMIDC→$4 月 KVM-512MB 20GB 500GB 香港&台日本VPS[主机]
- iframe 自适应高度 兼容多种浏览器全球[VPS测评]
- 阿里云 910 会员节 十年有礼 折扣回馈 爆款限时抢购 2 折起全球[VPS测评]
- 桔子数据日本 CN2 上线,三网回程 GIA,VPS 最高提供 20 个站群服务器[IP]
- 使用WooRank SEO分析工具来优化的你的博客全球[VPS测评]
- 哪些WordPress收费主题最靠谱?全球[VPS测评]
- PIGYun香港CIE/韩国MK套餐,BGP+CN2线路,八折优惠,优惠韩国VPS[主机]
- Uptime Robot 源码搭建 VPS 和网站在线监控工具,宕机推送全球[VPS测评]
- WikiHost 洛杉矶INAP线路VPS 可NF HULU全球[VPS测评]
- 咸鱼云 → 圣何塞 Elite 9929 → 解锁Netflix → 全球[VPS测评]
- 长三角地区的算力需求规模到底有多大?全球[VPS测评]
- 一篇漫画,看懂云计算全球[VPS测评]
- 什么是Bootstrap?全球[VPS测评]
- 极客主机,优惠8折充值返25%,香港CN2VPS,日本软银VPS,新加坡日本VPS[主机]
- MoonVM,香港HKT家宽VPS服务器,动态IP一键切换,1G带宽任意香港VPS[主机]
- 碳氧云,香港vps路由调整为沙田cn2,特价款6核6G仅80元/月香港VPS[主机]
- 者也vps年终特惠:全场云服务器7折终身优惠,赠1G内存,充1000送3全球[VPS测评]
- 青云互联:年终特惠香港弹性云服务器15元/月起,可自定义配置,可选winWINDOWS
- YYYHost:4核4G香港cn2vps,20G SSD/3Mbps不限香港VPS[主机]
- RAKsmart促销活动:韩国服务器低价抢购,美国G口服务器低至$99,韩国VPS[主机]
转载请注明原文地址:http://140.238.13.167:12355/read-214305.html











