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测评]
- MySQL 判断字段是否为 Null全球[VPS测评]
- 免费美国空间 微基主机→现有 VPS 客户可领取首年免费 100M 高速虚拟空间(主机)
- ThinkPHP5 提示 A non well formed numer全球[VPS测评]
- ZJI→香港云地&邦联服务器 65 折 香港葵湾特惠 6 折月付 450香港VPS[主机]
- 一般般-Hostigger→$2.99 首月 1 核 3G 1T 月流量全球[VPS测评]
- 特别烂-Letbox→洛杉矶 VPS 2 核 2G 内存 20G NVM全球[VPS测评]
- 慎重-MoeCloud→25 元 月 512G 流量 美国洛杉矶 CN2美国VPS[主机]
- JQuery.validate 通过 class 属性批量设置 inpu全球[VPS测评]
- $1 首月 4CUP 24G 内存 120G 硬盘 12TB 流量 1I全球[VPS测评]
- Call to undefined function openssl_s全球[VPS测评]
- ZetServers→€119 月 E3-1220v3 8GB 内存 2全球[VPS测评]
- js 定时器讲解全球[VPS测评]
- WordPress 修改管理页面登录地址全球[VPS测评]
- Veesp俄罗斯VPS春节特惠全场VPS和独立服务器新用户首次付款五折优独立服务器[U]
- OneVPS 官网改版,更换网址并更新套餐,首月半价优惠,75折终身优惠全球[VPS测评]
- CloudCone2021开年限时抢购 高IOPS/纯SSD硬盘/int全球[VPS测评]
- Estnoc → 6€月付起 新加坡 香港 菲律宾 马来西亚等全球多地数香港VPS[主机]
- 1分钟快速读懂云计算全球[VPS测评]
- 一篇漫画,看懂云计算全球[VPS测评]
- 文物、沉船、村落!干旱导致大量遗迹重见天日 2022年干旱还要持续多久?全球[VPS测评]
- 二三互联年末回馈:香港/美国云服务器新购特价促销,优惠码可打76折美国VPS[主机]
- 阳帝云双十二活动:1核1G10M大宽带香港BGP云服务器,月付14元香港VPS[主机]
- 常见的CN2,GIA,CIA 各个网络线路解释全球[VPS测评]
- 兼容移动和PC的loading加载和toast消息插件全球[VPS测评]
- UCloud全球大促活动:香港2核4G2M仅485元/年(台湾437元/美国VPS[主机]
- pittqiao:彰化HiNet/台北CN2/东京NTT/上海茂名联通C全球[VPS测评]
- m247服务器:香港/日本/新加坡/美国/欧洲等36个机房,1G~10G日本VPS[主机]
- 阿里云香港服务器多少钱一年?香港云服务器租用年付价格表香港VPS[主机]
- 春天的风最容易温暖心灵,适合朋友圈和抖音的12条文案全球[VPS测评]
转载请注明原文地址:http://140.238.13.167:12355/read-202539.html











