layui 之 laypage分页插件 #yyds干货盘点#

2021年11月22日 阅读数:4
这篇文章主要向大家介绍layui 之 laypage分页插件 #yyds干货盘点#,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

理论

laypage 的使用很是简单,指向一个用于存放分页的容器,经过服务端获得一些初始值,便可完成分页渲染。
官网:<a rel="nofollow" href="https://www.layui.com/">官网(下载)</a>;
示例:<a rel="nofollow" href="https://www.layui.com/demo/laypage.html">示例Demo</a>;javascript


经过核心方法:laypage.render(options) 来设置基础参数,该核心接口的参数以下表所示:css

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

注意:html

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

示例

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

模拟测试

代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>laypage Demo</title>
        <link rel="stylesheet" href="layui/css/layui.css" media="all">
        <script src="layui/layui.js" charset="utf-8"></script>
    </head>
    <body>
        <div id="laypage"></div>
        <ul id="city_list"></ul>
        <script>
            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('<li>' + item + '</li>');
                            });
                            return arr.join('');
                        }();
                    }
                });
            });
        </script>
    </body>
</html>

效果

在这里插入图片描述

服务器端真分页

服务器端代码

  • 数据库脚本
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依赖
<dependency>
    <groupId>junit</groupId>
    <artifactId>junit</artifactId>
    <version>4.12</version>
</dependency>
<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>8.0.18</version>
</dependency>
<dependency>
    <groupId>javax</groupId>
    <artifactId>javaee-api</artifactId>
    <version>8.0.1</version>
</dependency>
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.62</version>
</dependency>
  • Dept.javajava

    public class Dept {
    private Integer deptno;
    private String dname;
    private String loc;
    
    //……getter/setter、默认构造方法、全参构造方法
    }
  • PageBean.javamysql

    public class PageBean<T> {
    /**
     * 每页显示的条数
     */
    private long pageSize = 10;
    /**
     * 当前的页码
     */
    private long pageNum;
    /**
     * 一共有多少条记录
     */
    private long total;
    /**
     * 一共有多少页
     */
    private long pages;
    /**
     * 每一页所显示的数据
     */
    private List<T> 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 {// 一、加载驱动
        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<Dept> getAll() throws SQLException {
        List<Dept> 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<Dept> getWithPage(Integer pageNum, Integer pageSize) throws SQLException {
        List<Dept> 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<Dept> depts = deptService.getWithPage(pageNum, pageSize);
        PageBean<Dept> 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<Dept> depts = deptService.getAll();
        PageBean<Dept> pageBean = new PageBean<>();
        pageBean.setRecords(depts);
        out.write(JSON.toJSONString(pageBean));
    }
}

前端页面代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="layui/css/layui.css">
        <script src="layui/layui.js"></script>
        <script src="layui/jquery.js"></script>
    </head>
    <body>
        <table class="layui-table">
            <thead>
                <tr>
                    <th>部门编号</th>
                    <th>部门名称</th>
                    <th>部门地址</th>
                </tr>
            </thead>
            <tbody>
                <!-- 存放分页加载数据-->
            </tbody>
        </table>
        <div id="laypage"></div>

        <script type="text/javascript">
            $(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 < depts.length; i++) {
                            html += '<tr>';
                            html += ' <td>';
                            html += '     <span>' + depts[i].deptno + '</span>';
                            html += ' </td>';
                            html += ' <td>';
                            html += '     <span>' + depts[i].dname + '</span>';
                            html += ' </td>';
                            html += ' <td>';
                            html += '     <span>' + depts[i].loc + '</span>';
                            html += ' </td>';
                            html += '</tr>';
                        }
                        console.log(html)
                        $("tbody").empty().append(html);
                    }
                });
            }
            function showPage() {
                layui.use('laypage', function () {
                    let laypage = layui.laypage;
                    //执行一个laypage实例
                    laypage.render({
                        elem: 'laypage',  //注意laypage是 ID,不用加 # 号
                        count: total, //数据总数,从服务端获得
                        limit: pageSize,   //每页条数设置
                        limits: [10, 20, 30],           //可选每页显示条数
                        curr: 1,                      //起始页
                        groups: 3,                     //连续页码个数
                        prev: '上一页',               //上一页文本
                        next: '下一页',                //下一页文本
                        first: 1,                    //首页文本
                        last: pages,                   //尾页文本
                        layout: ['prev', 'page', 'next', 'limit', 'refresh', 'skip'],
                        jump: function (obj, first) {  //触发分页后的回调
                            //obj包含了当前分页的全部参数,第一次加载first为true
                            console.log(obj.curr); //获得当前页,以便向服务端请求对应页的数据。
                            console.log(obj.limit); //获得每页显示的条数
                            pageNum = obj.curr;  //改变当前页码
                            pageSize = obj.limit;
                            //首次不执行,必定要加此判断,不然初始时会无限刷新
                            if (!first) {
                                showData()  //加载数据
                            }
                        }
                    });
                });
            }
        </script>
    </body>

</html>
  • 效果:
    在这里插入图片描述