layui php ajax分页,实现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调用

var count = "${pageModel.recordCount}";

var curr = "${pageModel.pageIndex}";

var limit = "${pageModel.pageSize}";

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..com/gwzzayy/p/9450934.html

入行不久，项目用到layUI，以前没接触过，尚在学习中。异步分页已完成。如有错误请纠正，也请多多交流！