搭建layui+mybaits分页插件pagehelper实现漂亮的前端分页功能

pagehelper实现原理很简单，就是在数据库执行sql语句前将这条语句截下来拼上分页参数的字符串，具体代码如下

1、引入maven依赖或jar包、建立不要引入太高的版本、否则报错会让你莫名其妙（亲身体验过高版版的一些莫名其妙这里就不多说了）

		
			com.github.pagehelper
			pagehelper
			4.1.1
		

2、在spring跟mybatis的配置文件中配置这个插件

	
		
		
		
		
			
				
					dialect=mysql
				
			
		
	

3、实现分页的后台代码

    @RequestMapping(value = "/init",method = RequestMethod.GET)
    public String init(Model model, TsFile record, Pager pager) throws SQLException {
        Page page = PageHelper.startPage(pager.getPageNum(), pager.getPageSize());
        List files = tsFileService.querySelective(record);
        model.addAttribute("files",files);
        model.addAttribute("record",record);
        model.addAttribute("pager", pager.getPage(page));
        System.out.println(pager);
        return TABLE_VIEW+"/file-list";
    }

3.1、这里的init()方法形参中的pager是自已封装的一个分页javabean、也可以不、直接用属性去接收、但这样比较麻烦、以下为pager类代码、就一普通的javabean而以、只是里面多写了一个方法

package com.cqsc.admin.common.enums;

import com.github.pagehelper.Page;
import com.github.pagehelper.PageHelper;

/**
 * @creator LONGZHIQIANG
 * @createtime 2018/4/6 17:01.
 * @describe 分页对象实体
 */
public class Pager {

    public static final Integer PAGE_SIZE = 10;

    /**
     * 当前页
     */
    private Integer pageNum = 1;
    /**
     * 每页记录数
     */
    private Integer pageSize = PAGE_SIZE;
    /**
     * 总页数
     */
    private Integer totalPage = 0;
    /**
     * 开始行
     */
    private Integer startRecord = 0;
    /**
     * 结束行
     */
    private Integer endRecord = 0;
    /**
     * 总记录数
     */
    private Long totalRecord = 0L;

    private String remark;

    public Pager getPage(Page page) {
        this.pageNum = page.getPageNum();
        this.pageSize = page.getPageSize();
        this.totalPage = page.getPages();
        this.startRecord = page.getStartRow();
        this.endRecord = page.getEndRow();
        this.totalRecord = page.getTotal();
        return this;
    }


    public String getRemark() {
        return remark;
    }


    public Pager setRemark(String remark) {
        this.remark = remark;
        return this;
    }


    public Integer getPageNum() {
        return pageNum;
    }

    public Pager setPageNum(int pageNum) {
        this.pageNum = pageNum;
        return this;
    }

    public Integer getPageSize() {
        return pageSize;
    }

    public Pager setPageSize(Integer pageSize) {
        this.pageSize = pageSize;
        return this;
    }

    public Long getTotalRecord() {
        return totalRecord;
    }

    public Pager setTotalRecord(long totalRecord) {
        this.totalRecord = totalRecord;
        return this;
    }

    public Integer getTotalPage() {
        return totalPage;
    }

    public Pager setTotalPage(int totalPage) {
        this.totalPage = totalPage;
        return this;
    }

    public Integer getStartRecord() {
        return startRecord;
    }

    public Pager setStartRecord(Integer startRecord) {
        this.startRecord = startRecord;
        return this;
    }

    public long getEndRecord() {
        return endRecord;
    }

    public Pager setEndRecord(Integer endRecord) {
        this.endRecord = endRecord;
        return this;
    }


    @Override
    public String toString() {
        return "Pager{" +
                "pageNum=" + pageNum +
                ", pageSize=" + pageSize +
                ", totalPage=" + totalPage +
                ", startRecord=" + startRecord +
                ", endRecord=" + endRecord +
                ", totalRecord=" + totalRecord +
                ", remark='" + remark + '\'' +
                '}';
    }
}

4、那么到这里后台分页查询就已经完成了、接下来进入前台代码，前台这里用的是layui里面的一个分页组件，代码如下

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>

5、接下来在你需分页的地方统一引入该模版即可

6、还有记得引入layui.js文件跟样式文件

7、最后放几张效果图吧