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
- 优惠 阿里云双十二活动→特惠满减 最高 12000 元 送淘现金红包 云全球[VPS测评]
- WordPress 后台更新升级出现"您确定要这样做?"的解决办法全球[VPS测评]
- VirMach 圣何塞机房补货→终身六折 $15 年 512MB 内存 全球[VPS测评]
- 搬瓦工提示→This feature is disabled while全球[VPS测评]
- KTS24→€2.5 月 4G 内存 25GB SSD 空间 5TB 流虚拟空间(主机)
- CentOS7 详细搭建 CSGO 服务器全球[VPS测评]
- 搬瓦工 IP 地址 ping 不通的正确检查方式全球[VPS测评]
- 腾讯云服务器采购季活动被忽略的亮点,1 核 1G 内存 3M 带宽香港云香港VPS[主机]
- linux(ubuntu centos)下开启 mysql 远程访问权限全球[VPS测评]
- LOCVPS→56 元 月 KVM-2GB 30GB 600GB 圣何塞全球[VPS测评]
- 恒星云新春香港沙田CN2 VPS¥9.9起/月,成都高防¥144/月,大香港VPS[主机]
- CloudServer 8G 4核CPU 100G纯SSD 5T大流量月全球[VPS测评]
- Hostlayici 土耳其4Core VPS 测评 (原生IP)(硬件全球[VPS测评]
- 快速云:怎么连接vps?VPS的用途有哪些?全球[VPS测评]
- 自适应bootstrap左侧导航可关闭全球[VPS测评]
- 跨境电商周报丨拼多多布局跨境电商平台;Shopify将推出新平台支持网红全球[VPS测评]
- 适合美容院的正能量抖音文案,唯美阳光,正能量满满全球[VPS测评]
- 创意加载进度HTML动画特效,SVG+CSS3实现的动画死神来了load全球[VPS测评]
- 磐逸云怎么样?香港沙田cn2vps 带宽5M年付128元香港VPS[主机]
- CentOS 7.x 系统安装和配置redis-7.0.4集群全球[VPS测评]
- 百家云服务器怎么样?免备案香港云服务器、即开即用香港VPS[主机]
- hostkvm怎么样?香港云vps 带宽30M 月付6美元香港VPS[主机]
- 2022年最新的15个美容院抖音文案,美容院文案怎么写全球[VPS测评]
- edgenat:韩国cn2+香港cn2,VPS八折优惠,8核8G/50gWINDOWS
- hosthatch:香港/芝加哥/伦敦等11机房VPS低至$17.5/年香港VPS[主机]
- anyhk:香港HGC/WTT/HKT线路、台湾HiNet线路NAT套餐香港VPS[主机]
- Bloggar-移动端友好的新闻博客类HTML5模板全球[VPS测评]
- 为什么大家都选择香港服务器建站香港VPS[主机]
- 印象云,香港安畅CN2VPS终身8折1核1G22元/月,美国CN2高防V美国VPS[主机]
- 酷锐云元旦促销活动:香港CN2/美国CN2高防vps月付20元起/美国原美国VPS[主机]
转载请注明原文地址:http://140.238.13.167:12355/read-220309.html











