JSP + laypage分页完整案例

最新推荐文章于 2022-07-03 09:01:31 发布

zhengvipin

最新推荐文章于 2022-07-03 09:01:31 发布

阅读量4.2k

点赞数 1

分类专栏：分页文章标签： JSP laypage 分页

本文链接：https://blog.csdn.net/zhengvipin/article/details/80217321

版权

分页专栏收录该内容

1 篇文章 0 订阅

订阅专栏

之前用过datatables进行过分页，尽管其功能非常完善，但是代码稍嫌复杂，样式不是很美观，不经意间发现了laypage分页插件，其对于不进行排序、模糊查询的分页代码书写非常人性化，特此记录。

1.效果图

2.html页面

district.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>laypage 分页</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="hui/static/layui/css/layui.css">
</head>

<body>
<div class="layui-container" style="margin-top: 50px">
    <table class="layui-table">
        <thead>
            <tr>
                <th>did</th>
                <th>dname</th>
                <th>cname</th>
                <th>pname</th>
                <th>postcode</th>
                <th>areacode</th>
                <th>orderid</th>
            </tr>
        </thead>
        <!--分页数据盛放器-->
        <tbody></tbody>
        <!---------------->
    </table>
    <!--分页容器-->
    <div id="page" style="text-align:right"></div>
    <!----------->
</div>

<script src="hui/js/jquery-3.3.1.min.js"></script>
<script src="hui/static/layui/layui.js"></script>
<script>
    let curr = 1;// 当前页，初始值设为 1
    let limit = 10;// 每页条数，初始值设为 10
    let total;// 总记录数

    $(document).ready(function () {
        getInfo();// 获取数据
        toPage();// 进行分页
    });

    // 获取数据
    function getInfo() {
        $.ajax({
            type: "post",
            url: "district",
            async: false,// 设置同步请求，加载数据前锁定浏览器
            dataType: 'json',
            data: {
                "curr": curr, // 查询页码
                "limit": limit, // 每页条数
            },
            success: successFu
        });
    }

    // 数据请求成功
    function successFu(pager) {
        //console.log(data);
        // 1.清空原数据
        $("tbody").html("");

        // 2.重新赋值页码、条数、总记录数
        curr = pager.start;
        limit = pager.limit;
        total = pager.total;

        // 3.渲染数据
        // 当前查询无数据时
        if (pager.total == 0) {
            $("tbody").html("<tr><td colspan='7' class='text-center'>暂无数据</td></tr>");
            return;
        }

        let text = "";
        $.each(pager.data, (i, item) => {
            text += `
            <tr>
                <th>${item.did}</th>
                <th>${item.dname}</th>
                <th>${item.cname}</th>
                <th>${item.pname}</th>
                <th>${item.postcode}</th>
                <th>${item.areacode}</th>
                <th>${item.orderid}</th>
            </tr>
             `;
        });
        $("tbody").html(text);
    }

    // 进行分页
    function toPage() {
        layui.use('laypage', function () {
            let laypage = layui.laypage;
            // 调用分页
            laypage.render({
                // 分页容器的id
                elem: 'page',// *必选参数
                // 数据总数，从服务端得到
                count: total,// *必选参数
                // 每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。
                //limit:limit,
                // 起始页
                //curr:Pager,
                // 连续出现的页码个数
                //groups:5,
                // 自定义每页条数的选择项
                limits: [10, 25, 50, 100],
                // 自定义首页、尾页、上一页、下一页文本
                first: '首页',
                last: '尾页',
                prev: '<em><<</em>',
                next: '<em>>></em>',
                // 自定义主题
                theme: "#FF5722",
                // 自定义排版
                layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
                // 渲染数据
                jump: function (data, first) {
                    // data包含了当前分页的所有参数
                    curr = data.curr;
                    limit = data.limit;

                    // 首次不执行
                    if (!first) {
                        getInfo();
                    }
                }
            });
        })
    }
</script>
</body>
</html>

3.servlet页面

DistrictServlet.java

package com.XXX.servlet;

import com.XXX.dao.DistrictViewDao;
import com.XXX.pager.Pager;
import com.XXX.pojo.DistrictView;
import net.sf.json.JSON;
import net.sf.json.JSONSerializer;
import org.apache.commons.lang.math.NumberUtils;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

@WebServlet(name = "${Entity_Name}", urlPatterns = "/${Entity_Name}")
public class DistrictServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //request.setCharacterEncoding("utf-8");
        response.setContentType("application/json;charset=utf-8");

        System.out.println("开始查询数据...");
        // 1.获得页面数据
        Integer curr = NumberUtils.createInteger(request.getParameter("curr"));// 当前页
        Integer limit = NumberUtils.createInteger(request.getParameter("limit"));// 条数

        DistrictViewDao dao = new DistrictViewDao();
        // 2.查询数据库
        // 2.1 查询总记录数
        int total = dao.getTotal();
        // 2.2 查询分页数据
        List<DistrictView> data = dao.find(curr,limit);

        Pager<DistrictView> pager = new Pager<DistrictView>();
        // 3.封装分页类对象
        pager.setCurr(curr);
        pager.setLimit(limit);
        pager.setTotal(total);
        pager.setData(data);

        // 4.转换为json格式数据
        JSON json = JSONSerializer.toJSON(pager);

        PrintWriter out = response.getWriter();
        // 4.响应给客户端
        out.println(json.toString());

        out.flush();
        out.close();
    }
}

4.dao层

DistrictViewDao.java

package com.XXX.dao;

import com.XXX.pojo.DistrictView;
import org.apache.ibatis.session.SqlSession;

import java.util.List;

public class DistrictViewDao {
    /**
     * 获得总记录数
     *
     * @return 总记录数
     */
    public int getTotal(){
        int total = 0;
        SqlSession sqlSession = null;
        try {
            sqlSession = MybatisSessionFactory.getSessionFactory().openSession();
            DistrictViewMapper mapper = sqlSession.getMapper(DistrictViewMapper.class);
            total = mapper.getTotal();
        } finally {
            sqlSession.close();
        }
        return total;
    }

    /**
     * 查询分页数据
     *
     * @param start 查询页码
     * @param limit 每页记录数
     * @return 分页数据
     */
    public List<DistrictView> find(int start,int limit){
        List<DistrictView> list = null;
        SqlSession sqlSession = null;
        try {
            sqlSession = MybatisSessionFactory.getSessionFactory().openSession();
            DistrictViewMapper mapper = sqlSession.getMapper(DistrictViewMapper.class);
            start = (start-1)*limit;
            list = mapper.find(start,limit);
        } finally {
            sqlSession.close();
        }
        return list;
    }
}

5.其他

Pager.java

package com.XXX.pager;

import java.util.List;

/**
 * 分页封装类
 *
 * @param <T>
 */
public class Pager<T> {
    // 当前页
    private Integer curr;
    // 每页条数
    private Integer limit;
    // 总记录数
    private Integer total;
    // 分页数据
    List<T> data;

    public Pager() {
    }

    // getter/setter....
}

DistrictView.java

package com.XXX.pojo;

/**
 * 区县表视图类
 */
public class DistrictView {
    //did	dname	cname	pname	postcode	areacode	orderid
    private Integer did;
    private String dname;
    private String cname;
    private String pname;
    private String postcode;
    private String areacode;
    private Integer orderid;

    public DistrictView() {
    }

    // getter/setter....
}

2019-01-28 补充更新

入行一年多，再回过来看以前的代码，有点感慨，自认为当时学习还是比较刻苦，现在看来写的代码还是很多问题。这次整理博客，本想着删掉原稿修改后重新发布，再想想，还是留个记录吧，说不定哪天就写不动代码了，做个念想。

layui中的分页组件，仔细看了API，发现还是比较适合做前端分页，做后端分页的话就涉及到了一个异步渲染的问题，在此之前我是采用的async:false这个取巧的方式来锁定浏览器以达到先拿到数据再渲染分页功能的效果，实际开发中，这是行不通的，锁定该请求在一定程度上就会阻塞其他请求，导致浏览器渲染效率的降低，在此根据ES6的Promise函数对原稿进行重写。

（1）服务器分页

db-pager-demo.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>laypage 服务器分页</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="hui/static/layui/css/layui.css">
</head>

<body>
<div class="layui-container" style="margin-top: 50px">
    <table class="layui-table">
        <thead>
        <tr>
            <th>did</th>
            <th>dname</th>
            <th>cname</th>
            <th>pname</th>
            <th>postcode</th>
            <th>areacode</th>
            <th>orderid</th>
        </tr>
        </thead>
        <!--分页数据盛放器-->
        <tbody></tbody>
        <!---------------->
    </table>
    <!--分页容器-->
    <div id="page" style="text-align:right"></div>
    <!----------->
</div>

<script src="hui/js/jquery-3.3.1.min.js"></script>
<script src="hui/static/layui/layui.js"></script>
<script>
    window.onload = () => {
        requestFn({currentPage: 1, pageSize: 10}).then(({total = 0, data = []} = {}) => {
            /* 执行分页 */
            layui.use('laypage', () => {
                const laypage = layui.laypage;
                // 调用分页
                laypage.render({
                    // 分页容器的id
                    elem: 'page',// *必选参数
                    // 数据总数，从服务端得到
                    count: total,// *必选参数
                    // 起始页
                    curr: 1,
                    // 连续出现的页码个数
                    groups: 5,
                    // 自定义每页条数的选择项
                    limits: [10, 25, 50, 100],
                    // 自定义首页、尾页、上一页、下一页文本
                    first: '首页',
                    last: '尾页',
                    prev: '<em>&lt;&lt;</em>',
                    next: '<em>&gt;&gt;</em>',
                    // 自定义主题
                    theme: "#FF5722",
                    // 自定义排版
                    layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
                    // 渲染数据
                    jump: (obj, first) => {  // obj包含了当前分页的所有参数
                        // 首次不执行
                        if (!first) requestFn({currentPage: obj.curr, pageSize: obj.limit});
                    }
                });
            })
        })
    };

    /* 请求数据 */
    function requestFn(params) {
        return new Promise((reslove, reject) => {
            $.ajax({
                type: "post",
                url: "addressServlet",
                dataType: 'json',
                data: params,
                success: (data) => {
                    renderData(data);
                    reslove(data);
                }
            });
        })
    }

    /* 渲染数据 */
    function renderData({total = 0, data = []} = {}) {
        const $tbody = $("tbody");
        // 1.清空原数据
        $tbody.html("");
        // 2.渲染数据
        // 2.1 当前查询无数据时
        if (total === 0) {
            $tbody.html("<tr><td colspan='7' class='text-center'>暂无数据</td></tr>");
            return;
        }
        // 2.2 当前查询数据存在时
        let text = ``;
        data.forEach(item => {
            text += `
                        <tr>
                            <th>${item.did}</th>
                            <th>${item.dname}</th>
                            <th>${item.cname}</th>
                            <th>${item.pname}</th>
                            <th>${item.postcode}</th>
                            <th>${item.areacode}</th>
                            <th>${item.orderid}</th>
                        </tr>
                        `
        });
        $tbody.html(text);
    }
</script>
</body>
</html>

（2）前端分页

web-pager-demo.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>laypage 前端分页</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="hui/static/layui/css/layui.css">
</head>

<body>
<div class="layui-container" style="margin-top: 50px">
    <table class="layui-table">
        <thead>
        <tr>
            <th>did</th>
            <th>dname</th>
            <th>cname</th>
            <th>pname</th>
            <th>postcode</th>
            <th>areacode</th>
            <th>orderid</th>
        </tr>
        </thead>
        <!--分页数据盛放器-->
        <tbody></tbody>
        <!---------------->
    </table>
    <!--分页容器-->
    <div id="page" style="text-align:right"></div>
    <!----------->
</div>

<script src="hui/js/jquery-3.3.1.min.js"></script>
<script src="hui/static/layui/layui.js"></script>
<script>
    window.onload = () => {
        requestFn();
    };

    /* 请求数据 */
    function requestFn() {
        $.ajax({
            type: "get",
            url: "addressServlet",
            dataType: 'json',
            success: ({total = 0, data = []} = {}) => {
                // 调用分页
                layui.use('laypage', () => {
                    const laypage = layui.laypage;

                    laypage.render({
                        elem: 'page',
                        count: data.length,
                        jump: function (obj) {
                            //模拟渲染
                            document.querySelector('tbody').innerHTML = function () {
                                let arr = [],
                                    thisData = data.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
                                layui.each(thisData, function (index, item) {
                                    let text = `
                                    <tr>
                                        <th>${item.did}</th>
                                        <th>${item.dname}</th>
                                        <th>${item.cname}</th>
                                        <th>${item.pname}</th>
                                        <th>${item.postcode}</th>
                                        <th>${item.areacode}</th>
                                        <th>${item.orderid}</th>
                                    </tr>
                                `;
                                    arr.push(text);
                                });
                                return arr.join('');
                            }();
                        }
                    });
                })
            }
        });
    };
</script>
</body>
</html>

PS：有兴趣的朋友可以考虑下载新修demo完整代码，附上结构图及链接：

https://download.csdn.net/download/zhengvipin/10942565

zhengvipin

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
9
评论
JSP + laypage分页完整案例

之前用过datatables进行过分页，尽管其功能非常完善，但是代码稍嫌复杂，样式不是很美观，不经意间发现了laypage分页插件，其对于不进行排序、模糊查询的分页代码书写非常人性化，特此记录。1.效果图2.html页面district.html&lt;!DOCTYPE HTML&gt;&lt;html&gt;&lt;head&gt; &lt;meta ch...
复制链接

扫一扫