项目中用到了模板引擎thymeleaf和前端框架layUI，算是一路摸索、一个坑一个坑踩过来的。之前边学习边做项目的时候没有记录下学习的过程和遇到问题的解决思路和方法，着实有点可惜。所以从现在开始咯。
laypage分页
下面就以laypage的两种分页展开行文的思路：异步刷新分页和整页刷新式跳转。具体可参看官方文档。
异步刷新分页
首先使用laypage之前，先加载laypage模块。使用layui.use(‘laypage')加载即可。
1.前端html代码如下：
2.JS代码如下：
这部分使用了laypage分页函数和jQuery的append函数，实现异步刷新。
functionpaging(curr){
$.getJSON('/page',{
page:curr||1//向服务端传的参数
},function(res){
//此处输出内容
vartable=$("实现以上代码，基本上的样式已经出来。下面执行实现后端分页和数据查询即可。/p>
3.后端代码–controller部分：
/** *功能描述：返回无查询条件查询分页数据 *@parampage *@return *@since */ @RequestMapping(value="/page") @ResponseBody publicListgetPage(Integerpage){ if(page==null){ page=1; } List submitLogList=newArrayList<>(); submitLogList=logService.getAllLog(page); returnsubmitLogList; }
4.后端代码–service部分：
/** *功能描述:无查询条件分页 *@parampageCurr *@return *@since */ publicListgetAllLog(intpageCurr){ intpageSize=10;//每页显示十条数据 intpageStart=(pageCurr-1)*pageSize;//limit=(pageCurr-1)*10,10 List submitLogList=newArrayList<>(); submitLogList=logMapper.getAllLog(pageSize,pageStart); //计算前端页面显示的页数 //当前数据库记录数 intcount=submitLogList.get(0).getPageTotal(); intpage=count%pageSize==0?count/pageSize:count/pageSize+1; log.debug("页数"+page); submitLogList.get(0).setPageTotal(page); returnsubmitLogList; }
5.后端代码–dao部分：
/**
*功能描述：查询所有数据--带分页
*@parampageSize每页大小
*@parampageCurr即将显示当前页
*@return
*@since
*/
@Select("SELECTs.pageTotal,number_id,staff_name,create_time,weekly_id,operationFROMsubmit_log,"
+"(SELECTcount(1)ASpageTotalFROMsubmit_log)sORDERBYnumber_idDESCLIMIT#{pageStart},#{pageSize}")
@Results({
@Result(column="number_id",property="numberId"),
@Result(column="staff_name",property="staffName"),
@Result(column="create_time",property="createTime"),
@Result(column="weekly_id",property="weeklyId")
})
ListgetAllLog(@Param("pageSize")intpageSize,@Param("pageStart")intpageStart);
至此，异步分页前后端结合基本结束，因为代码都带有必要的注释，所以也无需过多解释。
整页刷新式跳转
这种方式的分页，基本上分页逻辑都由laypage去实现了，后端分页逻辑基本上不用过多考虑。还是比较方便的，建议结合官网的文档和代码进行理解。下面是实现代码：
1.前端HTML代码：
//此处是显示数据的具体HTML代码
2.Js代码：
这部分的分页实现，后端只需返回总页数即可。
functionpaging(){
$.getJSON('/weekly-page-count',{},function(res){
//整页刷新
laypage({
cont:'page-list',
pages:res,//可以叫服务端把总页数放在某一个隐藏域，再获取。假设我们获取到的是18
curr:function(){//通过url获取当前页，也可以同上（pages）方式获取
varpage=location.search.match(/page=(\d+)/);
returnpage?page[1]:1;
}(),
skip:true,
jump:function(e,first){//触发分页后的回调
if(!first){//一定要加此判断，否则初始时会无限刷新
location.href='?page='+e.curr;
}
}
});
});
}
paging();
3.后端代码–controller部分：
/**
*功能描述：返回无查询条件查询分页数--用户
*@parampage
*@return
*@since
*/
@RequestMapping(value="/weekly-page-count")
@ResponseBody
publicIntegergetPage1(IntegeruserId){
Integercount=weeklyService.getPageCount(userId);
returncount;
}
4.后端代码–service部分：
/**
*功能描述：总页数
*@paramuserId
*@return
*@since
*/
publicIntegergetPageCount(IntegeruserId){
intcount=0;
count=weeklyMapper.getPageCount(userId);
intpageSize=5;//每页显示条数
intpage=count%pageSize==0?count/pageSize:count/pageSize+1;//计算页数
returnpage;
}
5.后端代码–dao部分：
/**
*功能描述：无条件查询记录条数==分页总数
*@paramuserId
*@return
*@since
*/
@Select("SELECTcount(1)ASpageTotalFROMweeklyWHEREuser_id=#{userId}")
IntegergetPageCount(@Param("userId")IntegeruserId);
总结：两种分页方式使用起来都是比较方便的。使用的场景还是有些不同：异步式适合JQuery重写页面比较容易的；整页式更简单，各种场景都可以使用。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。