Bootstrap-table服务端分页无效以及服务端分页后不显示页码的解决方法

发布时间：2021-06-04 15:48:26来源：北大青鸟手游网作者：北大青鸟手游网

游戏类别：角色扮演
游戏大小：
游戏语言：
游戏版本：

扫码查看

Bootstrap-table是一款由国人开发的功能非常非常强大的表格插件，强烈推荐各位小伙伴们使用，最近在使用Bootstrap-table过程中发现分页方式设置为服务端后无法加载数据以及正确分页了，经过阅读文档发现，Bootstrap-table客户端分页和服务端分页模式要求返回的数据格式是不一样的。

客户端分页模式只要返回json格式的数据数组即可，而服务端分页的时候除了要返回数据数组以外还要返回total，即总记录数。

客户端分页方式返回数据格式：

[{"id":20170004,"name":"测试<a href="https://www.vpsassess.com/tag/%e6%b4%bb%e5%8a%a8" title="活动flickr.photos.notes.edit rel="nofollow">活动</a>系部","descr<a href="https://www.vpsassess.com/tag/ip" title="ipflickr.photos.notes.edit rel="nofollow">ip</a>tion":"所属系部<a href="https://www.vpsassess.com/tag/%e6%b4%bb%e5%8a%a8" title="活动flickr.photos.notes.edit rel="nofollow">活动</a>","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":"学院军训","descr<a href="https://www.vpsassess.com/tag/ip" title="ipflickr.photos.notes.edit rel="nofollow">ip</a>tion":"学院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":"学院迎新","descr<a href="https://www.vpsassess.com/tag/ip" title="ipflickr.photos.notes.edit rel="nofollow">ip</a>tion":"学院2017年迎新<a href="https://www.vpsassess.com/tag/%e6%b4%bb%e5%8a%a8" title="活动flickr.photos.notes.edit rel="nofollow">活动</a>，大学生志愿者。","begin_time":1504195200,"end_time":1504281600,"create_time":0,"score":0.5,"level":"校级","type_id":"工作履历","department_id":1,"sid":17160100,"aid":20170001,"time":1504751546}]

[{"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":"学院迎新","descr<a href="https://www.vpsassess.com/tag/ip" title="ipflickr.photos.notes.edit rel="nofollow">ip</a>tion":"学院2017年迎新<a href="https://www.vpsassess.com/tag/%e6%b4%bb%e5%8a%a8" title="活动flickr.photos.notes.edit rel="nofollow">活动</a>，大学生志愿者。","begin_time":1504195200,"end_time":1504281600,"create_time":0,"score":0.5,"level":"校级","type_id":"工作履历","department_id":1,"sids":"","count":0},{"id":20170002,"name":"学院军训","descr<a href="https://www.vpsassess.com/tag/ip" title="ipflickr.photos.notes.edit rel="nofollow">ip</a>tion":"学院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":"测试<a href="https://www.vpsassess.com/tag/%e6%b4%bb%e5%8a%a8" title="活动flickr.photos.notes.edit rel="nofollow">活动</a>已过期","descr<a href="https://www.vpsassess.com/tag/ip" title="ipflickr.photos.notes.edit rel="nofollow">ip</a>tion":"已过期<a href="https://www.vpsassess.com/tag/%e6%b4%bb%e5%8a%a8" title="活动flickr.photos.notes.edit rel="nofollow">活动</a>","begin_time":1504195200,"end_time":1504972800,"create_time":0,"score":0.2,"level":"校级","type_id":"志愿公益","department_id":1,"sids":"","count":0},{"id":20170004,"name":"测试<a href="https://www.vpsassess.com/tag/%e6%b4%bb%e5%8a%a8" title="活动flickr.photos.notes.edit rel="nofollow">活动</a>系部","descr<a href="https://www.vpsassess.com/tag/ip" title="ipflickr.photos.notes.edit rel="nofollow">ip</a>tion":"所属系部<a href="https://www.vpsassess.com/tag/%e6%b4%bb%e5%8a%a8" title="活动flickr.photos.notes.edit rel="nofollow">活动</a>","begin_time":1501516800,"end_time":1504281600,"create_time":0,"score":0.1,"level":"系级","type_id":"创新创业","department_id":2,"sids":"","count":0}]}

{"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服务端分页无效以及服务端分页后不显示页码的问题解决。

上一篇：Laravel报SQLSTATE[42000] Syntax error or access violation 1055 'xxx' isn't in GROUP BY

下一篇：搬瓦工补货：1核/1G/20G/500G流量/1Gbps/洛杉矶CN2 GIA/$93.4年付