实现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调用

<script type="text/javascript"><%--这里的页码参数封装成全局变量，js可以直接调用--%>
	 var count = "${pageModel.recordCount}";
	 var curr = "${pageModel.pageIndex}";
	 var limit = "${pageModel.pageSize}";
</script>
<div id="pageList" style="text-align:center;"></div>

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<Article> 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<Article> 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，以前没接触过，尚在学习中。异步分页已完成。如有错误请纠正，也请多多交流！

实现layUI的Ajax异步分页功能

猜你喜欢