SpringBoot+thymeleaf+layui+mybatis借助pagehelpe。。。
本篇记录简单分页功能的实现。
相关环境：
SpringBoot框架；
模板引擎：thymeleaf；
前端框架：layui；
持久层框架：mybatis；
分页插件：pagehelper；
写些废话
（ 急于功能实现的同学请直接跳过 ）
分页功能对于新⼿来说应该算是⼀个⽐较难的功能了（⼤佬请忽略），⾸先应该明确的⼀点是：分页功能是⼀个前端、后端都需要理解原理、进⾏代码编写的功能。
开始以为那么多分页插件嘛，随便copy⼀下就好了，或者只需要写后端，前端引⼀个插件就好了；和我有⼀样单纯想法的⼩盆友请进快放弃幻想，去和⾃⼰开发框架相符合的分页教程，乖乖写前后端代码吧。
还有！使⽤任何⼀个与本篇开篇记录不符的框架都可能出现和本篇记录流程冲突的现象，都不可以直接引⽤本篇记录的代码；寻思路当然是没有问题。（不然我也不会在csdn上爬了三天。。。）
页⾯展⽰
1、引⼊分页插件的maven依赖，在l⽂件添加下⾯代码：
<!--PageHelper 插件-->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>4.1.1</version>
</dependency>
<dependency>
<groupId>com.github.jsqlparser</groupId>
<artifactId>jsqlparser</artifactId>
<version>1.4</version>
</dependency>
2、引⼊前端的js、css⽂件
<!-- layui for Page -->
<link href="layui-v2.5.6/layui/css/layui.css"href="@{/layui-v2.5.6/layui/css/layui.css}"rel="stylesheet">
jquery框架定义<!-- layui插件引⼊-->
<script type="text/javascript" src="layui-v2.5.6/layui/layui.js" th:src="@{/layui-v2.5.6/layui/layui.js}"></script>
3、前端html和js编写
table表格：
<table id="Usertable"class="table table-striped table-sm"lay-filter="Usertable"></table>
脚本js：
注意添加<script type="text/javascript" th:inline="none">，否则表头会出现问题。
这⾥就⽤到了layui的前端分页插件，官⽹：
<script type="text/javascript" th:inline="none">
$(function(){$ = layui.jquery;
layui.use(['form','laypage','layer','table','element'],function(){
var form = layui.form
,laypage = layui.laypage //分页
,layer = layui.layer //弹层
,table = layui.table //表格
,element = layui.element //元素操作
elem:'#Usertable'
,height:312
,
url:'/user/findArticle'//数据接⼝
,method:'post'//默认：get请求
,limit:5
,limits:[5,10,15]
,page:true//开启分页
,cellMinWidth:10//全局定义常规单元格的最⼩宽度，layui 2.2.1 新增
,request:{
pageName:'page'//页码的参数名称，默认：page
,limitName:'limit'//每页数据量的参数名，默认：limit
},response:{
statusName:'code'//数据状态的字段名称，默认：code
,
countName:'count'//数据总数的字段名称，默认：count
,dataName:'data'//数据列表的字段名称，默认：data
}
,cols:[[//表头
{type:'checkbox', fixed:'left'}
,{field:'id', title:'#',width:50}
,{field:'name', title:'Name',width:80}
,{field:'syncTime', title:'SyncTime',templet:'<div>{{ DateString(d.syncTime, "yyyy-MM-dd HH:mm:ss") }}</div>',width:180} ,{field:'code', title:'Code'}
,{field:'account', title:'Account',width:130}
,{field:'sex', title:'Sex',width:60}
,{field:'idCard', title:'idCard',width:150}
,{title:'操作',width:178, align:'center', toolbar:'#barDemo',width:130}
]],
done:function(res, curr, count){
$("[data-field = 'sex']").children().each(function(){
if($(this).text()=='0'){
$(this).text("⼥");
}else if($(this).text()=='1'){
$(this).text("男");
}
});
}
});
});
});
</script>
<script type="text/html" id="barDemo">
<!--<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>-->
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
4、封装类
这个类是我在别的教程看到的，所以这个名字很奇怪哈哈
返回状态码code要赋初值为 “0”，否则前端会报错返回状态错误。
public class ResultVo {
private String code="0";
private String msg;
private long count=0;
private Object data;
// set、get⽅法略...
}
5、Controller
使⽤PageHelper插件，从前端获取两个参数：
page：当前要显⽰的页页码
limit：每页规定的数据条数
@Controller
@RequestMapping("/user")
public class StaffControllerPage {
@Autowired
StaffService staffService;
@Autowired
StaffMapper staffMapper;
/**
*
* 分页查询员⼯列表
* @return ok/fail
*/
@RequestMapping(value ="/findArticle", method = RequestMethod.POST)
@ResponseBody
public ResultVo findArticle(@RequestParam(required =false,defaultValue ="1")int page, @RequestParam(required =false,defaultValue ="10")int limit){ //实例化封装类
ResultVo rv=new ResultVo();
try{
//实例分页插件
PageInfo<B01BaseInfo_Staffs> pdr =new PageInfo<B01BaseInfo_Staffs>();
pdr = staffService.findArticle(page, limit);
// ---数据量进⾏⼆次单独查询
int totalNum = TotalNum();
rv.setCount(totalNum);
rv.List());//往封装类存⼊数据
System.out.println("===== 分页查询的信息："+ rv+"/n");
}catch(Exception e){
e.printStackTrace();
}
return rv;
}
}
6、Service
service中的相关逻辑后⾯会说。其中有两个⽅法：总数查询、分页查询。
@Service
public class StaffService {
@Autowired
StaffMapper staffMapper;
public int getTotalNum()throws SQLException{
Total();
}
public PageInfo<B01BaseInfo_Staffs>findArticle(int page,int limit)throws SQLException{
PageHelper.startPage(page, limit);
//derBy("article_id ASC");//排序设置
System.out.println("page = "+page+" limit = "+limit);
int start =(int)(page-1)*limit+1;
int end =(int)page*limit;
System.out.println("开始条数 = "+start+" 结束条数 = "+end);
int fir = end-start+1;// 第⼀个sql参数
int sec = start-1;// 第⼆个参数
System.out.println("first = "+fir+" second = "+sec);
List<B01BaseInfo_Staffs> ArticleInfo = staffMapper.findArticle(fir,sec);
PageInfo<B01BaseInfo_Staffs> pageinfo =new PageInfo<B01BaseInfo_Staffs>(ArticleInfo);
return pageinfo;
}
}
7、mapper
@Service// ⾃⼰加的，防⽌controller.LoginByAcc报错
// @Mapper或者@MapperScan将接⼝扫描装配到容器中
public interface StaffMapper {
// 查询总数
int getTotal()throws SQLException;
// 分页查询
List<B01BaseInfo_Staffs>findArticle(@Param("fir")int fir,@Param("sec")int sec)throws SQLException;
}
8、mybatis-xml
<select id="getTotal"  resultType="int">
select count(id)from BaseInfo_Staffs
</select>
<select id="findArticle" resultType="B01BaseInfo_Staffs">
select top ${fir} <include refid="columns"/>
from BaseInfo_Staffs
where id not in(
select top ${sec} id from BaseInfo_Staffs
)
</select>
⼀些解释：
看到service中的⽅法和sql语句可能有些习惯使⽤MySQL的同学不是很明⽩了，我也很难受。。。
我们知道，分页的原理就是从前端传来两个参数page和limit，分别代表前端当前要显⽰的页码（也就是第⼏页）和每页可容纳的数据量。后端的任务就是根据page和limit让sql语句只查出需要的部分数据，这是真实的分页原理。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。