实现layUI的Ajax异步分页功能
1. laypage模块自行到官方查看官方文档。任何资料都不及官方文档专业、详细。
https://www.layui.com/doc/modules/laypage.html 官方分页文档
https://www.layui.com/demo/laypage.html 分页在线预览，直接复制到点上可用，注意更换css、js文件路径
2.项目中用到的分页代码
思路：将分页方法封装，将异步请求封装。在页面加载完时先第一次调用分页方法将数据分页，然后再异步请求中调用分页方法，在分页方法中的jump函数中再调用异步请求方法。
代码如下：
1.先在jsp界面给一个分页容器 ，将pageModel的参数封装成全局变量，方便js调用
3.页面加载完先加载页码。因为我的首页数据是controller直接请求带来的
$(function(){
//封装分页方法，渲染分页,参数由jsp封装全局变量
//这里的参数在jsp页面中封装成全局变量。由请求带来的数据通过EL表达式获得
getPageList(count,curr,limit);
})4.分页方法：
//分页方法
function getPageList(count,curr,limit){
layui.use(['laypage', 'layer'], function(){
var laypage = layui.laypage
,layer = layui.layer;
//完整功能
laypage.render({
elem: 'pageList',//这个是容器的ID，这里不要加"#"噢
count: count||50,//数据总数
theme: '#00A0E9',
limit : limit||10,//每页展示10条数据
curr : curr||1,//当前页
first:'首页',
last:'尾页',
layout: ['count','prev', 'page', 'next', 'refresh', 'skip'],
jump: function(data,first){//jump就是点击分页每一个键都会触发
//分页逻辑layUI已经帮你做好了，只需要传入参数
var obj = eval(data);//这个data包含页码所有参数
if(!first){//不是第一次才进入这里
selectAjax("",obj.curr);//这个是ajax异步请求方法
}
}
});
});
}5. ajax异步请求
function selectAjax(day,pageIndex){
layui.use(['element','form','layer','jquery','laydate','laypage'], function(){
var element = layui.element;
var form = layui.form;
var layer = layui.layer;
var laydate = layui.laydate;
var laypage = layui.laypage;
var $ = layui.jquery;
$.ajax({
type:"POST",
url:"selectAjax.html",
data:{"del":del,"pageIndex":pageIndex},
dataType:"json",
success:function(data){
var obj = eval(data);
$.each(obj.minHeadlineList,function(index,minHeadline){
//在ajax成功回调函数中遍历数据。给遍历完的数据添加分页标签，这里分页方法的参数是从返回的数据带回来的
getPageList(obj.pageModel.recordCount,obj.pageModel.pageIndex,obj.pageModel.pageSize);
})
}
});
})
}6.controller
方法上的实体类参数（pageModel、User等）会由springMVC带着过去。不需要再设request了
/**
*
* @param request
* @param response
* @return
*/
//第一次数据是forword转发请求的。实体类参数会由springMVC带着过去。不需要再设request了
@RequestMapping(value = "headline.html", method = RequestMethod.GET)
public String headline(Integer pageIndex,PageModel pageModel,HttpServletRequest request, HttpServletResponse response,Model model) {
List articles = manageService.selectHeadlineList(pageIndex，pageModel);
model.addAttribute("articles", articles);
//model.addAttribute("pagemodel", pageModel);这里不需要再设了，springMVC已经帮我们带过去了
return "xxxxx";
}
/**
* 查询的Ajax
* @param pageIndex
* @param pageModel
* @param request
* @param response
* @param model
* @return
*/
//这里是异步请求的接口
@RequestMapping(value = "headlineAjax.html", produces="text/html;charset=UTF-8")
@ResponseBody
public String headlineAjax(Integer pageIndex,PageModel pageModel,HttpServletRequest request, HttpServletResponse response) {
List articles = manageService.selectHeadlineList( pageIndex,pageModel);
JSONObject json = new JSONObject();
json.put("articles", articles);
json.put("pageModel", pageModel);//这里将分页参数放到json中，这是实现异步的关键之一
return json.toString();
} 7.dao层先查询出数据的总数，设置pageModel中的pageCount
int count = jdbcTemplate.queryForObject(sqlCount, Integer.class);
pageModel.setRecordCount(count);//数据总数
Integer index = pageModel.getPageIndex();
if(index == null || index == 0) {
pageModel.setPageIndex(1);
}
int startIndex = pageModel.getFirstLimitParam();//起始行号，pageModel封装好
int pageSize = pageModel.getPageSize();//每页展示多少数据8.分页实体类
package com.headlinemanage.openlowrie.pojo;
/**
* 分页实体
*/
public class PageModel {
/** 分页总数据条数 */
private int recordCount;
/** 当前页面 */
private int pageIndex = 1;
/** 每页分多少条数据 */
private int pageSize = 10;
/** 总页数*/
private int totalPageSize;
public int getTotalPageSize() {
return totalPageSize;
}
public void setTotalPageSize(int totalPageSize) {
this.totalPageSize = totalPageSize;
}
public int getRecordCount() {
return recordCount;
}
public void setRecordCount(int recordCount) {
this.recordCount = recordCount;
}
public int getPageIndex() {
//计算总页数
totalPageSize = recordCount % pageSize == 0 ? recordCount / pageSize : recordCount / pageSize +1;
if(totalPageSize == 0) {
totalPageSize = 1;
}
//当前页码不能大于总页码
return pageIndex > totalPageSize ? totalPageSize : pageIndex;
}
public void setPageIndex(int pageIndex) {
this.pageIndex = pageIndex;
}
public int getPageSize() {
return pageSize;
}
public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}
//计算开始行号
public int getFirstLimitParam(){
return (this.getPageIndex()-1)*this.getPageSize() ;
}
}
灵感来自：https://www.cnblogs.com/gwzzayy/p/9450934.html
入行不久，项目用到layUI，以前没接触过，尚在学习中。异步分页已完成。如有错误请纠正，也请多多交流！