tp5.1的bootstrap tableq前端,服务端分页

在做毕业设计时用到了tp5.1以及bootstrap table的服务端分页,这里记录一下。
说明:
首先我先说一下bootstrap table分页的总体思想吧,分页包块前端分页和服务端分页,前端分页很简单,就是你直接把bootstrap table的属性配置好,然后会自动把你要分页的数据分配好进行分页,简单方便,但是这里有个不好的就是这样服务端就会负担很重,因为后端需要把你所需要的数据全部找出来然后再反馈给前端进行分页。
那么这里就说到服务端分页了,服务端分页是通过前端传递相关参数,后端根据这些参数在后端进行操作,这只是根据你要什么我给你找什么的思想,不想前端分页需要后端全部找出来看你要什么,所以大多数都是服务端分页。下面说一下步骤。

一:首先下载相应js,以及css进行引入,这里就不说了,网上很多教程。
JS和css引入
二:
1.客户端分页,也是前端分页(我自己叫的,方便理解)
客户端分页很简单,直接在controller里返回你需要的数据,然后再配置columns就行了,这个网上有很多,前端分页就不多说了
在这里插入图片描述
2.服务端分页,这个是重点
2.1首先这个也不难,主要是就是通过bootstrap table自带的queryparams传递相关分页的参数(这里碰的坑我其他文章有,可以看看有需要的),这个参数主要就是一个当前页码(limit: params.pageSize)和每页多少条数据( offset: params.pageNumber),这两个就可以完成分页了,还可以加上一点你自己需要的参数 ,例如加入你自己定义了搜索框,可以传递你的搜索文本实现模糊查询等( search_text: $("#search_text").val(),//搜索的文本),***

注意一点,就是你的controller类必须返回的时total(这个是总数,会根据这个给你分页)和rows(这个是你的数据,就是你要显示的东西),这个很重要,不然返回不了数据分不了页


一部分代码如下

前端HTML

  <div class="col-md-6"  style="width: 100%;display:none"  id="student_data_div">
                    <div class="panel panel-default">
                        <div class="panel-heading" >
                            <div class="text-muted bootstrap-admin-box-title">学生用户信息</div>
                            <div class="pull-right"><span class="badge">1,234</span></div>
                        </div>
                        <div class="search" style="margin-top: 50px">
                        <div class="col-sm-3">
                            <
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值