layui 之 laypage分页插件

理论

laypage 的使用非常简单，指向一个用于存放分页的容器，通过服务端得到一些初始值，即可完成分页渲染。 本博客代码下载地址：本博客相关代码

通过核心方法：laypage.render(options) 来设置基础参数，该核心接口的参数如下表所示：

参数选项说明类型类型elem指向存放分页的容器，值可以是容器ID、DOM对象。如：1. elem: ‘id’ 注意：这里不能加 # 号 2. elem: document.getElementById(‘id’)String/Object-count数据总数。一般通过服务端得到Number-limit每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。Number10limits每页条数的选择项。如果 layout 参数开启了 limit，则会出现每页条数的select选择框Array[10, 20, 30, 40, 50]curr起始页。一般用于刷新类型的跳页以及HASH跳页。如：//开启location.hash的记录laypage.render({elem: ‘test1’,count: 500,curr: location.hash.replace(‘#!fenye=’, ‘’), //获取起始页hash: ‘fenye’ //自定义hash值});Number1groups连续出现的页码个数Number5prev自定义“上一页”的内容，支持传入普通文本和HTMLString上一页next自定义“下一页”的内容，同上String下一页first自定义“首页”的内容，同上String1last自定义“尾页”的内容，同上String总页数值layout自定义排版。可选值有：count（总条目输区域）、prev（上一页区域）、page（分页区域）、next（下一页区域）、limit（条目选项区域）、refresh（页面刷新区域。注意：layui 2.3.0 新增） 、skip（快捷跳页区域）Array[‘prev’, ‘page’, ‘next’]theme自定义主题。支持传入：颜色值，或任意普通字符。如： 1. theme: ‘#c00’ 2. theme: ‘xxx’ //将会生成 class=“layui-laypage-xxx” 的CSS类，以便自定义主题String-hash开启location.hash，并自定义 hash 值。如果开启，在触发分页时，会自动对url追加：#!hash值={curr} 利用这个，可以在页面载入时就定位到指定页String/Booleanfalse

注意:

• count: total 代表总的数据量，
• limit 代表每页行数，
• curr 代表起始页，但jump函数中的obj.curr取的是当前页数
• jump 方法中obj参数可以取到上面的属性和方法
• first 为是否首次加载

示例

将下载下来的layui压缩包解压后放在项目的webapp根目录。

模拟测试 代码

    
        
        laypage Demo
        
        
    
    
        
        
        
            layui.use(['laypage', 'layer'], function () {
                let laypage = layui.laypage;
                let data = [
                    '北京',
                    '上海',
                    '广州',
                    '深圳',
                    '杭州',
                    '长沙',
                    '合肥',
                    '宁夏',
                    '成都',
                    '西安',
                    '南昌',
                    '上饶',
                    '沈阳',
                    '济南',
                    '厦门',
                    '福州',
                    '九江',
                    '宜春',
                    '赣州',
                    '宁波',
                    '绍兴',
                    '无锡',
                    '苏州',
                    '徐州',
                    '东莞',
                    '佛山',
                    '中山',
                    '成都',
                    '武汉',
                    '青岛',
                    '天津',
                    '重庆',
                    '南京',
                    '九江',
                    '香港',
                    '澳门',
                    '台北'
                ];
                //调用分页
                laypage.render({
                    elem: 'laypage', // 存放分页控件的容器
                    count: data.length, //数据总数。一般通过服务端得到
                    limit: 4,//每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。
                    limits: [10, 20, 50],//每页条数的选择项
                    layout: ['prev', 'page', 'next', 'limit', 'limits'],
                    theme: '#F457F2', //自定义主题
                    jump: function (obj) {//模拟渲染
                        document.getElementById('city_list').innerHTML = function () {
                            let arr = [];
                            let thisData = data.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
                            layui.each(thisData, function (index, item) {
                                arr.push('
' + item + '
');
                            });
                            return arr.join('');
                        }();
                    }
                });
            });
        
    

效果

服务器端真分页 服务器端代码

• 数据库脚本

CREATE TABLE `tb_dept`  (
  `deptno` tinyint(2) UNSIGNED NOT NULL  COMMENT '部门编号',
  `dname` varchar(14) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '部门名称',
  `loc` varchar(13) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '部门地址',
  PRIMARY KEY (`deptno`) USING BTREE
) ENGINE = InnoDB  CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

• Maven依赖

    junit
    junit
    4.12


    mysql
    mysql-connector-java
    8.0.18


    javax
    javaee-api
    8.0.1


    com.alibaba
    fastjson
    1.2.62

• Dept.java

public class Dept {
    private Integer deptno;
    private String dname;
    private String loc;

    //……getter/setter、默认构造方法、全参构造方法
}

• PageBean.java

public class PageBean {
    /**
     * 每页显示的条数
     */
    private long pageSize = 10;
    /**
     * 当前的页码
     */
    private long pageNum;
    /**
     * 一共有多少条记录
     */
    private long total;
    /**
     * 一共有多少页
     */
    private long pages;
    /**
     * 每一页所显示的数据
     */
    private List records;

    //……getter/setter、默认构造方法、全参构造方法
}

• DBUtil.java

public final class DBUtil {
    private static final String url = "jdbc:mysql://localhost:3306/db_test?useSSL=false&serverTimezone=GMT%2B8";//连接字符串
    private static final String name = "root";    //用户名
    private static final String pass = "root"; //密码

    static {// 1、加载驱动
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
        } catch (ClassNotFoundException e) {
            throw new ExceptionInInitializerError(e);
        }
    }

    public static Connection getConnection() throws SQLException {
        return DriverManager.getConnection(url, name, pass);
    }
     public static void free(ResultSet rs, Statement stmt, Connection conn) {
        try { // 建议采用这种形式来释放资源，因为finally里面的一定会被释放
            if (rs != null) {
                rs.close();
            }
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            try {
                if (stmt != null) {
                    stmt.close();
                }
            } catch (SQLException e) {
                e.printStackTrace();
            } finally {
                if (conn != null) {
                    try {
                        conn.close();
                    } catch (SQLException e) {
                        e.printStackTrace();
                    }
                }
            }
        }
    }
}

• DeptService.java

public class DeptService {
    public List getAll() throws SQLException {
        List depts = new ArrayList();
        Connection conn = DBUtil.getConnection();
        String sql = "select * from tb_dept";
        PreparedStatement ps = conn.prepareStatement(sql);
        ResultSet rs = ps.executeQuery();
        while (rs.next()) {
            depts.add(new Dept(rs.getInt("deptno"), rs.getString("dname"), rs.getString("loc")));
        }
        return depts;
    }

    public List getWithPage(Integer pageNum, Integer pageSize) throws SQLException {
        List depts = new ArrayList();
        Connection conn = DBUtil.getConnection();
        String sql = "select * from tb_dept limit ?,?";
        PreparedStatement ps = conn.prepareStatement(sql);
        ps.setInt(1, (pageNum - 1) * pageSize);
        ps.setInt(2, pageSize);
        ResultSet rs = ps.executeQuery();
        while (rs.next()) {
            depts.add(new Dept(rs.getInt("deptno"), rs.getString("dname"), rs.getString("loc")));
        }
        DBUtil.free(rs,ps,conn);
        return depts;
    }

    public int count() throws SQLException {
        Connection conn = DBUtil.getConnection();
        String sql = "select count(*) from tb_dept";
        PreparedStatement ps = conn.prepareStatement(sql);
        ResultSet rs = ps.executeQuery();
        rs.next();
        int res = rs.getInt(1);
        DBUtil.free(rs,ps,conn);
        return res;
    }
}

• DeptServlet

@WebServlet(urlPatterns = "/dept")
public class DeptServlet extends HttpServlet {

    private DeptService deptService = new DeptService();

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String op = req.getParameter("op");
        PrintWriter out = resp.getWriter();
        switch (op) {
            case "getAll":
                try {
                    getAll(out);
                } catch (SQLException e) {
                    e.printStackTrace();
                }
                break;
            case "getWithPage":
                try {
                    getWithPage(req, out);
                } catch (SQLException e) {
                    e.printStackTrace();
                }
                break;
            default:
                break;
        }
        out.flush();
    }

    private void getWithPage(HttpServletRequest req, PrintWriter out) throws SQLException {
        int pageNum = Integer.parseInt(req.getParameter("pageNum"));
        int pageSize = Integer.parseInt(req.getParameter("pageSize"));
        List depts = deptService.getWithPage(pageNum, pageSize);
        PageBean pageBean = new PageBean();
        pageBean.setPageNum(pageNum);
        pageBean.setPageSize(pageSize);
        pageBean.setRecords(depts);

        int count = deptService.count();
        pageBean.setTotal(count);
        pageBean.setPageSize(count % pageSize == 0 ? count / pageSize : count / pageSize + 1);
        out.write(JSON.toJSONString(pageBean));
    }

    private void getAll(PrintWriter out) throws SQLException {
        List depts = deptService.getAll();
        PageBean pageBean = new PageBean();
        pageBean.setRecords(depts);
        out.write(JSON.toJSONString(pageBean));
    }
}

前端页面代码

DOCTYPE html>

    
        
        Title
        
        
        
    
    
        
            
                
                    部门编号
                    部门名称
                    部门地址
                
            
            
                
            
        
        

        
            $(function () {
                showData()  //请求数据
                showPage()     //分页操作
            });

            let pageNum = 1; //设置首页页码
            let pageSize = 5;  //设置一页显示的条数
            let total;    //总条数
            let  pages; //一共多少页

            function showData() {
                $.ajax({
                    type: "get",
                    url: "http://localhost:8080/LayuiDemo/dept?op=getWithPage",//对应controller的URL
                    async: false,
                    dataType: 'json',
                    data: {
                        "pageNum": pageNum,
                        "pageSize": pageSize,
                    },
                    success: function (res) {
                        total = res.total;  //设置总条数
                        pages =  res.pages;
                        console.log(res);
                        let depts = res.records;
                        let html = '';
                        for (let i = 0; i