LayUI+PageHelper实现分页插件

尹浩亮[email protected]

Mybatis分页插件PageHelper

在MyBatis中使用PageHelper 

官网 https://pagehelper.github.io/

首先要在pom.xml中配置PageHelper的依赖

在http://www.mvnrepository.com/中可以发现pagehelper有4.x和5.x两个版本，用法有所不同，并不是向下兼容，在使用5.x版本的时候可能会报错

xml

    com.github.pagehelper

    pagehelper

    4.2.1

  

在Mybatis的配置文件中配置PageHelper插件

假如不配置在后面使用PageInfo类时就会出现问题，输出结果的PageInfo属性值基本上都是错的

配置如下

       

       

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

       

   

dialect：标识是哪一种数据库，设计上必须。

offsetAsPageNum：将RowBounds第一个参数offset当成pageNum页码使用

rowBoundsWithCount：设置为true时，使用RowBounds分页会进行count查询

reasonable：value=true时，pageNum小于1会查询第一页，如果pageNum大于pageSize会查询最后一页

注：上面的配置只针对于pagehelper4.x版本的.   

项目中使用方法和结果 

在配置完mybatis后，看下pagehelper的业务用法，就以分页查询用户列表为例

添加查询所以用户的mapper接口.我这块使用的注解

@Select("SELECT * FROM country")

List getAllCountrys();

重点来了，然后在service中,先开启分页，然后把查询结果集放入PageInfo中

public PageInfo listUserByPage(int pageNum, int pageSize) {

        PageHelper.startPage(pageNum, pageSize);

        List userVoList=userMapper.listUser();

        PageInfo pageInfo=new PageInfo(userVoList);

        return pageInfo;

    }

PageHelper.startPage(pageNum, pageSize);这句非常重要，这段代码表示分页的开始，意思是从第pageNum页开始，每页显示pageSize条记录。

PageInfo这个类是插件里的类，这个类里面的属性会在输出结果中显示,

使用PageInfo这个类,你需要将查询出来的list放进去.

PageHelper输出的数据结构 

然后在controller层调用该方法设置对应的pageNum和pageSize就可以了，我设置pageNum为1, pageSize为3，看个输出结果吧

PageInfo{pageNum=1, pageSize=3, size=3, startRow=1, 

endRow=3, total=3, pages=1, list=Page{count=true,

pageNum=1, pageSize=3, startRow=0, endRow=3, total=3,

pages=1, countSignal=null, orderBy='null',

orderByOnly=false, reasonable=true,

pageSizeZero=true}, prePage=0, nextPage=0,

isFirstPage=true, isLastPage=true,

hasPreviousPage=false, hasNextPage=false,

navigatePages=8, navigateFirstPage1,

navigateLastPage1, navigatepageNums=[1]}

PageInfo类里面的属性 

pageNum当前页

pageSize每页的数量

size当前页的数量

orderBy排序

startRow当前页面第一个元素在数据库中的行号

endRow当前页面最后一个元素在数据库中的行号

total总记录数(在这里也就是查询到的用户总数)

pages总页数 (这个页数也很好算，每页5条，总共有11条，需要3页才可以显示完)

list结果集

prePage前一页

nextPage下一页

isFirstPage是否为第一页

isLastPage是否为最后一页

hasPreviousPage是否有前一页

hasNextPage是否有下一页

navigatePages导航页码数

navigatepageNums所有导航页号

navigateFirstPage导航第一页

navigateLastPage导航最后一页

firstPage第一页

lastPage最后一页

最后转为json格式 

导包 

  com.alibaba

  fastjson

  1.2.47

@Override

    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        resp.setContentType("text/html;charset=utf-8");

        PageInfo countryPageInfo = new PageService().listUserByPage(1, 3);

        System.out.println(countryPageInfo);

        List list = countryPageInfo.getList();

        String s = JSON.toJSONString(countryPageInfo);

        resp.getWriter().write(s);

    }

前端使用jQuery+layui发送数据 

HTML部分

	ID	标题	分类	来源	更新时间	浏览次数	操作	操作	操作	操作

   //这个为分页的DIV

jquery部分

            var datas;

            function pages(pageNum,pageSize) {

                $.ajax({

                    type:"post",

                    url:"/MavenDemos_war_exploded/page.do",

                    data:{

                        "pageNum":pageNum,

                        "pageSize":pageSize

                    },

                    dataType:"json",

                    async:false,

                    success:function (data1) {

                        console.log(data1);

                        //加载后台返回的List集合数据

                        datas = data1;

                        data = data1.list;

                        for (var i = 0; i < data.length; i++) {

                            var td = $("").text(data[i].id);

                            var td2 = $("").text(data[i].userName);

                            var td3 = $("").text(data[i].passWord);

                            var td4 = $("").text(data[i].email);

                            var td5 = $("").text(data[i].phone);

                            var td6 = $("").text(data[i].question);

                            var td7 = $("").text(data[i].answer);

                            var td8 = $("").text(data[i].role);

                            var td9 = $("").text(data[i].create_time);

                            var td10 = $("").text(data[i].update_time);

                            var td11 = $("").html("

                                "                              class=\"ml-5\" style=\"text-decoration:none\">\n" +

                                "                                \n" +

                                "                           

                                "                              style=\"text-decoration:none\">\n" +

                                "                                \n" +

                                "                            ");

                            var tr = $("").append(td, td2, td3, td4,td5,td6,td7,td8,td9,td10,td11);

                            $('#tbody').append(tr);

                        }

                    },

                    error :function (response) {

                        console.log(response);

                    }

                })

            }

            var pageSize = 2;

            pages(1,pageSize); 

layui部分

laypage({

    cont: 'page'

    ,count: datas.total

    ,pages: datas.pages

    ,first: datas.firstPage

    ,last: datas.lastPage

    ,prev: '<'

    ,next: '>'

    , limit: pageSize                      //每页显示条数

    , curr: 1                        //起始页

    , groups: 5                      //连续页码个数

    , first: 1                      //首页文本

    , last: datas.pages                    //尾页文本

    //跳转页码时调用

    , jump: function (obj, first) { //obj为当前页的属性和方法，第一次加载first为true

        //非首次加载 do something

            //清空以前加载的数据

            $('#tbody').empty();

            //调用加载函数加载数据

            pages(obj.curr,obj.limit);

    }

});