JSP + laypage分页完整案例

之前用过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() {
    }

    public Integer getCurr() {
        return curr;
    }

    public void setCurr(Integer curr) {
        this.curr = curr;
    }

    public Integer getLimit() {
        return limit;
    }

    public void setLimit(Integer limit) {
        this.limit = limit;
    }

    public Integer getTotal() {
        return total;
    }

    public void setTotal(Integer total) {
        this.total = total;
    }

    public List<T> getData() {
        return data;
    }

    public void setData(List<T> data) {
        this.data = data;
    }
}

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() {
    }

    public Integer getDid() {
        return did;
    }

    public void setDid(Integer did) {
        this.did = did;
    }

    public String getDname() {
        return dname;
    }

    public void setDname(String dname) {
        this.dname = dname;
    }

    public String getCname() {
        return cname;
    }

    public void setCname(String cname) {
        this.cname = cname;
    }

    public String getPname() {
        return pname;
    }

    public void setPname(String pname) {
        this.pname = pname;
    }

    public String getPostcode() {
        return postcode;
    }

    public void setPostcode(String postcode) {
        this.postcode = postcode;
    }

    public String getAreacode() {
        return areacode;
    }

    public void setAreacode(String areacode) {
        this.areacode = areacode;
    }

    public Integer getOrderid() {
        return orderid;
    }

    public void setOrderid(Integer orderid) {
        this.orderid = orderid;
    }
}

JSP + laypage分页完整案例

猜你喜欢