《layui宇宙版教程》：分页组件laypage

最新推荐文章于 2024-01-04 09:58:09 发布

立志做一个佳娃~

最新推荐文章于 2024-01-04 09:58:09 发布

阅读量1.5k

点赞数

分类专栏： Layui宇宙版教程文章标签： layui 前端

本文链接：https://blog.csdn.net/ghyghost/article/details/108115904

版权

Layui宇宙版教程专栏收录该内容

40 篇文章 16 订阅

订阅专栏

《Layui宇宙版教程》提供2000人的QQ群进行交流学习，QQ群号：1046961650，或通过手机QQ扫描二维码进入：

1.20 分页组件laypage

layPage致力于提供极致的分页逻辑，既可轻松胜任异步分页，也可作为页面刷新式分页。

模块加载名称：laypage。

1.20.1 快速使用

laypage的使用非常简单，指向一个用于存放分页的容器，通过服务端得到一些初始值，即可完成分页渲染

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var laypage = layui.laypage;

//执行一个laypage实例

laypage.render({

elem: 'test1',

//注意，这里的 test1 是 ID，不用加 # 号

});

</script>

</body>

</html>

运行效果如图1-xx所示。

1.20.2 基础参数选项

通过核心方法：

laypage.render(options)

来设置基础参数，由于使用非常简单，本篇直接罗列核心接口的参数选项如图1-xx所示。

1.20.2.1 elem: document.getElementById("test1")

elem值类型String/Object。指向存放分页的容器，值可以是容器ID、DOM对象，例如：

（1）elem: 'id' 。注意：这里不能加#号。

（2）elem: document.getElementById('id')。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var laypage = layui.laypage;

//执行一个laypage实例

laypage.render({

elem: document.getElementById("test1"),

});

</script>

</body>

</html>

运行效果如图1-xx所示。

1.20.2.2 count

count值类型Number。

数据总记录数，一般通过服务端得到。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var laypage = layui.laypage;

//执行一个laypage实例

laypage.render({

elem: "test1",

});

</script>

</body>

</html>

运行效果如图1-xx所示。

1.20.2.3 limit

limit值类型Number。

每页显示的条数。laypage将会借助count和limit计算出分页数。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var laypage = layui.laypage;

//执行一个laypage实例

laypage.render({

elem: "test1",

limit: 200

});

</script>

</body>

</html>

运行效果如图1-xx所示。

1.20.2.4 layout

layout值类型Array。自定义排版，可选值有：count（总条目输区域）、prev（上一页区域）、page（分页区域）、next（下一页区域）、limit（条目选项区域）、refresh（页面刷新区域）、skip（快捷跳页区域）。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var laypage = layui.laypage;

laypage.render({

elem: "test1",

});

</script>

</body>

</html>

运行效果如图1-xx所示。

1.20.2.5 limits

limits值类型Array。每页条数的选择项。如果layout参数开启了limit，则会出现每页条数的select选择框。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var laypage = layui.laypage;

laypage.render({

elem: "test1",

limits: [100, 300, 500, 700, 900],

});

</script>

</body>

</html>

运行效果如图1-xx所示。

1.20.2.6 groups

groups值类型Number。连续出现的页码个数。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var laypage = layui.laypage;

laypage.render({

elem: "test1",

groups: 7,

limits: [100, 300, 500, 700, 900],

});

</script>

</body>

</html>

运行效果如图1-xx所示。

1.20.2.7 first-prev-next-last

first值类型String。自定义“首页”的内容，支持传入普通文本和HTML。

prev值类型String。自定义“上一页”的内容，支持传入普通文本和HTML。

next值类型String。自定义“下一页”的内容，支持传入普通文本和HTML。

last值类型String。自定义“尾页”的内容，支持传入普通文本和HTML。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var laypage = layui.laypage;

laypage.render({

elem: "test1",

first: "我是首页",

prev: "我是上一页",

next: "我是下一页",

last: "我是末页",

});

laypage.render({

elem: "test2",

first: "我是首页",

prev: "我是上一页",

next: "我是下一页",

last: "我是末页"

});

</script>

</body>

</html>

运行效果如图1-xx所示。

1.20.2.8 theme

theme值类型String。自定义主题。支持传入：颜色值或任意普通字符，例如：

（1）theme: '#c00'。

（2）theme: 'xxx'。将会生成class="layui-laypage-xxx"的CSS类，以便自定义主题。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var laypage = layui.laypage;

laypage.render({

elem: "test1",

theme: "#ff007f",

first: "首页",

prev: "上一页",

next: "下一页",

last: "末页"

});

</script>

</body>

</html>

运行效果如图1-xx所示。

1.20.2.9 curr

curr值类型Number。起始页。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var laypage = layui.laypage;

laypage.render({

elem: "test1",

theme: "#ff007f",

curr: 88,

first: "首页",

prev: "上一页",

next: "下一页",

last: "末页"

});

</script>

</body>

</html>

运行效果如图1-xx所示。

1.20.2.10 hash

当使用如下代码创建分页：

var laypage = layui.laypage;

laypage.render({

elem: "test1",

theme: "#ff007f",

curr: 88,

first: "首页",

prev: "上一页",

next: "下一页",

last: "末页"

});

</script>

打开网页时自动定位到88页，使用鼠标点击87页，把URL发给其它人，其它人看到的页数还是88页，这是不对的，其它人应该看到87页才是正确的，所以要使用hash属性。

hash值类型String/Boolean。开启location.hash，并自定义hash值。如果开启，在触发分页时，会自动对url追加：#!hash值={curr}，利用这个参数可以在页面载入时就定位到指定页。

一般用于刷新类型的跳页以及HASH跳页，例如：

//开启location.hash的记录

laypage.render({

elem: 'test1',

curr: location.hash.replace('#!fenye=', ''), //获取起始页

hash: 'fenye' //自定义hash值

});

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var laypage = layui.laypage;

laypage.render({

elem: "test1",

theme: "#ff007f",

curr: location.hash.replace('#!gotoPage=', ''),

hash: "gotoPage",

first: "首页",

prev: "上一页",

next: "下一页",

last: "末页"

});

</script>

</body>

</html>

把URL给别人，别人看到的指定页数是一样的。

1.20.3 jump切换分页的回调

当分页被切换时触发，函数返回两个参数：obj（当前分页的所有选项值）、first（是否首次，一般用于初始加载的判断）

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var laypage = layui.laypage;

laypage.render({

elem: 'test1',

jump: function(obj, first) {

//obj包含了当前分页的所有参数，比如：

alert(obj.curr); //得到当前页，以便向服务端请求对应页的数据。

alert(obj.limit); //得到每页显示的条数

//首次不执行

if (!first) {} else {

alert("first run begin query!");

}

});

</script>

</body>

</html>

1.20.4 laypage实现服务端分页公共代码

laypage实现服务端分页公共代码。

1.20.4.1 工具类代码

package dbtools;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;

public class GetConnection {

    public static Connection getConnection() {
        Connection conn = null;
        try {
            String url = "jdbc:mysql://localhost:3306/y2?serverTimezone=Asia/Shanghai";
            String username = "root";
          String password = "123123";
            String driverName = "com.mysql.jdbc.Driver";
            Class.forName(driverName);
            conn = DriverManager.getConnection(url, username, password);
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return conn;
    }
}

1.20.4.2 DAO类代码

package dao;

import dbtools.GetConnection;
import dto.PageDTO;
import dto.UserinfoPageQueryDTO;
import entity.Userinfo;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;

public class UserinfoDAO {
    public PageDTO selectUserinfoPage(UserinfoPageQueryDTO dto) {
        PageDTO pageDTO = new PageDTO();
        List<Userinfo> listUserinfo = new ArrayList<>();
        try {
            int pageSize = 12;
            int beginPosition = (dto.getGotoPage() - 1) * pageSize;

            String sql1 = "select count(*) recordCount from userinfo";
            String sql2 = "select * from userinfo";
            String where = " where 1=1";
            String order = " order by id asc";
            String limit = " limit " + beginPosition + "," + pageSize;

            dto.getUsername();
          dto.getPassword();
            dto.getBeginAge();
            dto.getEndAge();
            dto.getBeginInsertDate();
            dto.getEndInsertDate();

            List sqlParamValueList = new ArrayList();
            if (!"".equals(dto.getUsername()) && dto.getUsername() != null) {
                where = where + " and username like ?";
                sqlParamValueList.add("%" + dto.getUsername() + "%");
                pageDTO.getQueryParam().put("username", dto.getUsername());
            }
            if (!"".equals(dto.getPassword()) && dto.getPassword() != null) {
               where = where + " and password like ?";
                sqlParamValueList.add("%" + dto.getPassword() + "%");
                pageDTO.getQueryParam().put("password", dto.getPassword());
            }
            if (dto.getBeginAge() != -1) {
                where = where + " and age >= ?";
                sqlParamValueList.add(dto.getBeginAge());
                pageDTO.getQueryParam().put("beginAge", dto.getBeginAge());
            }
            if (dto.getEndAge() != -1) {
                where = where + " and age <= ?";
                sqlParamValueList.add(dto.getEndAge());
                pageDTO.getQueryParam().put("endAge", dto.getEndAge());
            }
          if (dto.getBeginInsertDate() != null) {
                where = where + " and insertdate >= ?";
                sqlParamValueList.add(dto.getBeginInsertDate());
                pageDTO.getQueryParam().put("beginInsertDate", dto.getBeginInsertDate());
            }
            if (dto.getEndInsertDate() != null) {
                where = where + " and insertdate <= ?";
               sqlParamValueList.add(dto.getEndInsertDate());
                pageDTO.getQueryParam().put("endInsertDate", dto.getEndInsertDate());
            }

            sql1 = sql1 + where;
            sql2 = sql2 + where + order + limit;

            System.out.println(sql1);
            System.out.println(sql2);

            List queryPageList = new ArrayList();
            {
                Connection conn = GetConnection.getConnection();
                PreparedStatement ps = conn.prepareStatement(sql1);
                //将查询的参数放入List中，
                //然后通过for循环依次对List中的值与对应的?进行对应传参。
                for (int i = 0; i < sqlParamValueList.size(); i++) {
                    ps.setObject(i + 1, sqlParamValueList.get(i));
                }
                ResultSet rs = ps.executeQuery();
                while (rs.next()) {
                    int recordCount = rs.getInt("recordCount");
                    pageDTO.getGotoPage().put("recordCount", recordCount);
                }
                rs.close();
                ps.close();
                conn.close();
            }
            {
                Connection conn = GetConnection.getConnection();
                PreparedStatement ps = conn.prepareStatement(sql2);
                for (int i = 0; i < sqlParamValueList.size(); i++) {
                    ps.setObject(i + 1, sqlParamValueList.get(i));
                }
                ResultSet rs = ps.executeQuery();
                while (rs.next()) {
                    int id = rs.getInt("id");
                    String username = rs.getString("username");
                  String password = rs.getString("password");
                    int age = rs.getInt("age");
                    Date insertdate = rs.getDate("insertdate");

                    Userinfo userinfo = new Userinfo();
                    userinfo.setId(id);
                    userinfo.setUsername(username);
                    userinfo.setPassword(password);
                    userinfo.setAge(age);
                    userinfo.setInsertdate(insertdate);
                    listUserinfo.add(userinfo);

                    queryPageList.add(userinfo);
                }
                rs.close();
                ps.close();
                conn.close();
            }
            pageDTO.setPageList(queryPageList);
            System.out.println(queryPageList.size());
        } catch (
                SQLException e) {
            e.printStackTrace();
        }
        return pageDTO;
    }
}

1.20.4.3 Service类代码

package service;

import dao.UserinfoDAO;
import dto.PageDTO;
import dto.UserinfoPageQueryDTO;

public class UserinfoService {
    private UserinfoDAO userinfoDao = new UserinfoDAO();

    public PageDTO selectUserinfoPage(UserinfoPageQueryDTO dto) {
        PageDTO pageDTO = userinfoDao.selectUserinfoPage(dto);
        return pageDTO;
    }
}

1.20.4.4 实体类代码

package entity;

import java.util.Date;

public class Userinfo {
    private int id;
    private String username;
    private String password;
    private int age;
    private Date insertdate;

    public Userinfo() {
        this.id = id;
        this.username = username;
        this.password = password;
        this.age = age;
        this.insertdate = insertdate;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public Date getInsertdate() {
        return insertdate;
    }

    public void setInsertdate(Date insertdate) {
        this.insertdate = insertdate;
    }
}

1.20.4.5 2个DTO类代码

package dto;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class PageDTO {
    //保存查询条件的值，目的是在前台重新显示
    private Map queryParam = new HashMap();
    //查询的分页数据列表
    private List pageList;
    //分页导航，首页，上一页，下一页，末页，总页数等相关的数值
    private Map gotoPage = new HashMap();

    public Map getQueryParam() {
        return queryParam;
    }

    public void setQueryParam(Map queryParam) {
        this.queryParam = queryParam;
    }

    public List getPageList() {
        return pageList;
    }

    public void setPageList(List pageList) {
        this.pageList = pageList;
    }

    public Map getGotoPage() {
        return gotoPage;
    }

   public void setGotoPage(Map gotoPage) {
        this.gotoPage = gotoPage;
    }
}

package dto;

import java.util.Date;

public class UserinfoPageQueryDTO {

    private String username;
    private String password;
    private int beginAge;
    private int endAge;
    private Date beginInsertDate;
    private Date endInsertDate;
    private int gotoPage;

    public UserinfoPageQueryDTO() {
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
      this.password = password;
    }

    public int getBeginAge() {
        return beginAge;
   }

    public void setBeginAge(int beginAge) {
        this.beginAge = beginAge;
    }

    public int getEndAge() {
        return endAge;
    }

    public void setEndAge(int endAge) {
        this.endAge = endAge;
    }

    public Date getBeginInsertDate() {
        return beginInsertDate;
    }

    public void setBeginInsertDate(Date beginInsertDate) {
        this.beginInsertDate = beginInsertDate;
    }

    public Date getEndInsertDate() {
        return endInsertDate;
    }

    public void setEndInsertDate(Date endInsertDate) {
        this.endInsertDate = endInsertDate;
    }

    public int getGotoPage() {
        return gotoPage;
    }

    public void setGotoPage(int gotoPage) {
        this.gotoPage = gotoPage;
    }
}

1.20.4 laypage结合table实现服务端分页-有刷新

Servlet类代码如下：

package controller;

import dto.PageDTO;
import dto.UserinfoPageQueryDTO;
import service.UserinfoService;

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.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;

@WebServlet(name = "ListUserinfo", urlPatterns = "/ListUserinfo")
public class ListUserinfo extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        String beginAge = request.getParameter("beginAge");
        String endAge = request.getParameter("endAge");
        String beginInsertDate = request.getParameter("beginInsertDate");
        String endInsertDate = request.getParameter("endInsertDate");
        String gotoPage = request.getParameter("gotoPage");

        System.out.println(username);
        System.out.println(password);
        System.out.println(beginAge);
        System.out.println(endAge);
        System.out.println(beginInsertDate);
        System.out.println(endInsertDate);

        int beginAgeInt = -1;
        int endAgeInt = -1;
        int gotoPageInt = 1;
        if (!"".equals(beginAge) && beginAge != null) {
            try {
                beginAgeInt = Integer.parseInt(beginAge);
           } catch (NumberFormatException e) {
                beginAgeInt = -1;
            }
        }
        if (!"".equals(endAge) && endAge != null) {
            try {
                endAgeInt = Integer.parseInt(endAge);
            } catch (NumberFormatException e) {
                endAgeInt = -1;
            }
        }
        if (!"".equals(gotoPage) && gotoPage != null) {
            try {
                gotoPageInt = Integer.parseInt(gotoPage);
            } catch (NumberFormatException e) {
                gotoPageInt = 1;
            }
        }

        Date beginInsertDateObject = null;
        Date endInsertDateObject = null;
        SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");
        if (!"".equals(beginInsertDate) && beginInsertDate != null) {
            try {
                beginInsertDateObject = format.parse(beginInsertDate);
            } catch (ParseException e) {
                beginInsertDateObject = null;
            }
        }
        if (!"".equals(endInsertDate) && endInsertDate != null) {
            try {
                endInsertDateObject = format.parse(endInsertDate);
            } catch (ParseException e) {
                endInsertDateObject = null;
            }
        }

        UserinfoPageQueryDTO dto = new UserinfoPageQueryDTO();
        dto.setUsername(username);
        dto.setPassword(password);
        dto.setBeginAge(beginAgeInt);
        dto.setEndAge(endAgeInt);
        dto.setBeginInsertDate(beginInsertDateObject);
        dto.setEndInsertDate(endInsertDateObject);
        dto.setGotoPage(gotoPageInt);

        UserinfoService userinfoService = new UserinfoService();
        PageDTO pageDTO = userinfoService.selectUserinfoPage(dto);
        request.setAttribute("pageDTO", pageDTO);
        request.getRequestDispatcher("listUserinfo.jsp").forward(request, response);
    }
}

index.jsp文件代码如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>Title</title>
    </head>
    <body>
        <jsp:forward page="/ListUserinfo"></jsp:forward>
    </body>
</html>

listUserinfo.jsp文件代码如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
    <head>
        <title>Title</title>
        <script src="js/jquery3.5.1.js"></script>
        <link rel="stylesheet" href="layui/css/layui.css"/>
        <script src="layui/layui.all.js"></script>
    </head>
    <body>
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md12">
                <div>
                    <input type="hidden" id="gotoPage" name="gotoPage"/>
                    <table class="layui-table">
                        <colgroup>
                            <col width="100">
                            <col>
                            <col width="100">
                            <col>
                          <col width="100">
                            <col>
                            <col width="100">
                            <col>
                        </colgroup>
                        <tbody>
                            <tr>
                                <td>账号</td>
                                <td><input type="text" id="username" name="username" placeholder="请输入账号"
                                           autocomplete="off"
                                          class="layui-input" value="${pageDTO.queryParam.username}"></td>
                                <td>密码</td>
                                <td><input type="text" id="password" name="password" placeholder="请输入账号"
                                           autocomplete="off"
                                           class="layui-input" value="${pageDTO.queryParam.password}"></td>
                                <td>开始年龄</td>
                                <td><input type="text" id="beginAge" name="beginAge" placeholder="请输入账号"
                                           autocomplete="off"
                                           class="layui-input" value="${pageDTO.queryParam.beginAge}"></td>
                                <td>结束年龄</td>
                                <td><input type="text" id="endAge" name="endAge" placeholder="请输入账号"
                                           autocomplete="off"
                                           class="layui-input" value="${pageDTO.queryParam.endAge}"></td>
                            </tr>
                            <tr>
                                <td>开始日期</td>
                                <td><input type="text" id="beginInsertDate" name="beginInsertDate"
                                           placeholder="请输入账号" autocomplete="off"
                                           class="layui-input"
                                           value="<fmt:formatDate value="${pageDTO.queryParam.beginInsertDate}" pattern="yyyy-MM-dd"></fmt:formatDate>">
                                </td>
                                <td>结束日期</td>
                                <td><input type="text" id="endInsertDate" name="endInsertDate" placeholder="请输入账号"
                                           autocomplete="off"
                                           class="layui-input"
                                           value="<fmt:formatDate value="${pageDTO.queryParam.endInsertDate}" pattern="yyyy-MM-dd"></fmt:formatDate>">
                                </td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td colspan="8" style="text-align: center;">
                                    <button id="queryButton" type="button" class="layui-btn layui-btn-normal"
                                            style="width: 100px;">
                                        查询
                                    </button>
                                    <button id="resetButton" type="reset" class="layui-btn layui-btn-warm"
                                            style="width: 100px;">重置
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space10" style="height: 700px;">
            <div class="layui-col-md12">
                <div>
                    <table class="layui-table" lay-even lay-size="lg">
                        <colgroup>
                            <col width="100">
                            <col width="100">
                            <col>
                            <col>
                            <col width="100">
                            <col width="150">
                        </colgroup>
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>ID</th>
                                <th>账号</th>
                                <th>密码</th>
                                <th>年龄</th>
                                <th>注册日期</th>
                            </tr>
                        </thead>
                        <tbody>
                            <c:forEach var="eachUserinfo" items="${pageDTO.pageList}" varStatus="status">
                                <tr>
                                    <td>
                                        <c:if test="${param.gotoPage==null}">
                                            ${status.index+1}
                                        </c:if>
                                        <c:if test="${param.gotoPage!=null}">
                                            ${(param.gotoPage-1)*12+status.index+1}
                                        </c:if>
                                    </td>
                                    <td>${eachUserinfo.id}</td>
                                    <td>${eachUserinfo.username}</td>
                                    <td>${eachUserinfo.password}</td>
                                    <td>${eachUserinfo.age}</td>
                                    <td>${eachUserinfo.insertdate}</td>
                                </tr>
                            </c:forEach>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md12">
                <div>
                    <table class="layui-table">
                        <thead>
                            <tr>
                                <th style="background-color: white;text-align: center">
                                    <div id="page"></div>
                                </th>
                            </tr>
                        </thead>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div id="test1"></div>
        <script>
            var laypage = layui.laypage;
            var element = layui.element;
            var form = layui.form;
            var laydate = layui.laydate;

            laydate.render({
                elem: '#beginInsertDate' //指定元素
            });
            laydate.render({
                elem: '#endInsertDate' //指定元素
            });

            function beginQuery(gotoPage) {
                var paramValue = "ListUserinfo?gotoPage=" + $("#gotoPage").val();
               paramValue = paramValue + "&" + "username=" + $("#username").val();
                paramValue = paramValue + "&" + "password=" + $("#password").val();
                paramValue = paramValue + "&" + "beginAge=" + $("#beginAge").val();
                paramValue = paramValue + "&" + "endAge=" + $("#endAge").val();
                paramValue = paramValue + "&" + "beginInsertDate=" + $("#beginInsertDate").val();
                paramValue = paramValue + "&" + "endInsertDate=" + $("#endInsertDate").val();
                paramValue = paramValue + "#!laypageValue=" + gotoPage;
                location.href = paramValue;
            }

            laypage.render({
                elem: 'page',
                count: ${pageDTO.gotoPage.recordCount},
                limit: 12,
                theme: "#1E9FFF",
                layout: ['prev', 'page', 'next', 'skip', 'count'],
                curr: location.hash.replace('#!laypageValue=', ''),
                hash: 'laypageValue',
                jump: function (obj, first) {
                    //obj包含了当前分页的所有参数，比如：
                   //alert(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                    //alert(obj.limit); //得到每页显示的条数
                    //首次不执行
                    if (!first) {
                        $("#gotoPage").val(obj.curr);
                        beginQuery($("#gotoPage").val());
                    } else {
                        //alert("first run begin query!");
                    }
                }
            });
            $(document).ready(function () {
                $("#queryButton").click(function () {
                    $("#gotoPage").val(1);
                    beginQuery($("#gotoPage").val());
                });

                $("#resetButton").click(function () {
                    $("#gotoPage").val(1);
                    $("#username").val("")
                    $("#password").val("");
                    $("#beginAge").val("");
                    $("#endAge").val("");
                    $("#beginInsertDate").val("");
                    $("#endInsertDate").val("");
                });
            });

            form.render();
        </script>
    </body>
</html>

1.20.5 laypage结合table实现服务端分页-无刷新

Servlet类代码如下：

package controller;

import com.fasterxml.jackson.databind.ObjectMapper;
import dto.PageDTO;
import dto.UserinfoPageQueryDTO;
import service.UserinfoService;

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.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;

@WebServlet(name = "ListUserinfo", urlPatterns = "/ListUserinfo")
public class ListUserinfo extends HttpServlet {
  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        String beginAge = request.getParameter("beginAge");
        String endAge = request.getParameter("endAge");
        String beginInsertDate = request.getParameter("beginInsertDate");
        String endInsertDate = request.getParameter("endInsertDate");
        String gotoPage = request.getParameter("gotoPage");

        System.out.println(username);
        System.out.println(password);
        System.out.println(beginAge);
        System.out.println(endAge);
        System.out.println(beginInsertDate);
        System.out.println(endInsertDate);

        int beginAgeInt = -1;
        int endAgeInt = -1;
      int gotoPageInt = 1;
        if (!"".equals(beginAge) && beginAge != null) {
            try {
                beginAgeInt = Integer.parseInt(beginAge);
            } catch (NumberFormatException e) {
                beginAgeInt = -1;
            }
        }
        if (!"".equals(endAge) && endAge != null) {
            try {
                endAgeInt = Integer.parseInt(endAge);
            } catch (NumberFormatException e) {
                endAgeInt = -1;
            }
        }
        if (!"".equals(gotoPage) && gotoPage != null) {
            try {
                gotoPageInt = Integer.parseInt(gotoPage);
            } catch (NumberFormatException e) {
              gotoPageInt = 1;
            }
        }

        Date beginInsertDateObject = null;
        Date endInsertDateObject = null;
        SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");
        if (!"".equals(beginInsertDate) && beginInsertDate != null) {
            try {
                beginInsertDateObject = format.parse(beginInsertDate);
            } catch (ParseException e) {
                beginInsertDateObject = null;
            }
        }
        if (!"".equals(endInsertDate) && endInsertDate != null) {
            try {
                endInsertDateObject = format.parse(endInsertDate);
            } catch (ParseException e) {
                endInsertDateObject = null;
            }
        }

        UserinfoPageQueryDTO dto = new UserinfoPageQueryDTO();
        dto.setUsername(username);
        dto.setPassword(password);
        dto.setBeginAge(beginAgeInt);
        dto.setEndAge(endAgeInt);
        dto.setBeginInsertDate(beginInsertDateObject);
        dto.setEndInsertDate(endInsertDateObject);
        dto.setGotoPage(gotoPageInt);

        UserinfoService userinfoService = new UserinfoService();
        PageDTO pageDTO = userinfoService.selectUserinfoPage(dto);

        ObjectMapper mapper = new ObjectMapper();
        String jsonString = mapper.writeValueAsString(pageDTO);
        System.out.println(jsonString);

        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        out.print(jsonString);
        out.flush();
        out.close();
    }
}

index.jsp文件代码如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>Title</title>
    </head>
    <body>
        <jsp:forward page="/listUserinfo.html"></jsp:forward>
    </body>
</html>

listUserinfo.html文件代码如下：

<html>
    <head>
        <title>Title</title>
        <script src="js/jquery3.5.1.js"></script>
        <link rel="stylesheet" href="layui/css/layui.css"/>
        <script src="layui/layui.all.js"></script>
    </head>
    <body>
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md12">
                <div>
                    <input type="hidden" id="gotoPage" name="gotoPage"/>
                    <table class="layui-table">
                        <colgroup>
                            <col width="100">
                            <col>
                            <col width="100">
                            <col>
                            <col width="100">
                            <col>
                            <col width="100">
                            <col>
                        </colgroup>
                        <tbody>
                            <tr>
                                <td>账号</td>
                                <td><input type="text" id="username" name="username" placeholder="请输入账号"
                                           autocomplete="off"
                                           class="layui-input"></td>
                                <td>密码</td>
                                <td><input type="text" id="password" name="password" placeholder="请输入账号"
                                           autocomplete="off"
                                           class="layui-input"></td>
                                <td>开始年龄</td>
                                <td><input type="text" id="beginAge" name="beginAge" placeholder="请输入账号"
                                           autocomplete="off"
                                           class="layui-input"></td>
                                <td>结束年龄</td>
                                <td><input type="text" id="endAge" name="endAge" placeholder="请输入账号"
                                           autocomplete="off"
                                           class="layui-input"></td>
                            </tr>
                            <tr>
                                <td>开始日期</td>
                                <td><input type="text" id="beginInsertDate" name="beginInsertDate"
                                           placeholder="请输入账号" autocomplete="off"
                                           class="layui-input"/>
                                </td>
                                <td>结束日期</td>
                                <td><input type="text" id="endInsertDate" name="endInsertDate" placeholder="请输入账号"
                                           autocomplete="off"
                                           class="layui-input"/>
                                </td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td colspan="8" style="text-align: center;">
                                    <button id="queryButton" type="button" class="layui-btn layui-btn-normal"
                                           style="width: 100px;">
                                        查询
                                    </button>
                                    <button id="resetButton" type="reset" class="layui-btn layui-btn-warm"
                                            style="width: 100px;">重置
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space10" style="height: 700px;">
           <div class="layui-col-md12">
                <div>
                    <table id="userinfoPageTable" class="layui-table" lay-even lay-size="lg">
                        <colgroup>
                            <col width="100">
                            <col width="100">
                            <col>
                            <col>
                            <col width="100">
                           <col width="150">
                        </colgroup>
                      <thead>
                            <tr>
                                <th>序号</th>
                                <th>ID</th>
                                <th>账号</th>
                                <th>密码</th>
                                <th>年龄</th>
                                <th>注册日期</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md12">
                <div>
                    <table class="layui-table">
                        <thead>
                          <tr>
                                <th style="background-color: white;text-align: center">
                                    <div id="page"></div>
                                </th>
                            </tr>
                        </thead>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div id="test1"></div>
        <script>
            var laypage = layui.laypage;
            var element = layui.element;
            var form = layui.form;
            var laydate = layui.laydate;

            laydate.render({
                elem: '#beginInsertDate' //指定元素
            });
            laydate.render({
                elem: '#endInsertDate' //指定元素
            });

            function createTR(eachUserinfo, index) {
                var newTR = $("<tr></tr>");

                var td_number = $("<td></td>");
                var gotoPage = $("#gotoPage").val();
                $(td_number).text((gotoPage - 1) * 12 + index + 1);
                var td_id = $("<td></td>");
                $(td_id).text(eachUserinfo.id);
                var td_username = $("<td></td>");
                $(td_username).text(eachUserinfo.username);
                var td_password = $("<td></td>");
                $(td_password).text(eachUserinfo.password);
                var td_age = $("<td></td>");
                $(td_age).text(eachUserinfo.age);
                var td_insertdate = $("<td></td>");
                var insertDate = new Date(eachUserinfo.insertdate);
                var showDateString = insertDate.getFullYear() + "-" + (insertDate.getMonth() + 1) + "-" + insertDate.getDate();
                $(td_insertdate).text(showDateString);

                $(newTR).append(td_number);
                $(newTR).append(td_id);
                $(newTR).append(td_username);
                $(newTR).append(td_password);
                $(newTR).append(td_age);
                $(newTR).append(td_insertdate);

                return newTR;
            }

            function fillPageInfo(gotoPage) {
                $("#userinfoPageTable").find("tbody").empty();
                $.post("ListUserinfo?t=" + new Date().getTime(), {
                    "username": $("#username").val(),
                    "password": $("#password").val(),
                    "beginAge": $("#beginAge").val(),
                    "endAge": $("#endAge").val(),
                    "beginInsertDate": $("#beginInsertDate").val(),
                    "endInsertDate": $("#endInsertDate").val(),
                    "gotoPage": gotoPage
                }, function (data) {
                    var jsonObject = JSON.parse(data);
                    var pageList = jsonObject.pageList;
                    for (var i = 0; i < pageList.length; i++) {
                        var returnNewTR = createTR(pageList[i], i);
                        $("#userinfoPageTable").find("tbody").append(returnNewTR);
                    }

                    laypage.render({
                        elem: 'page',
                        count: jsonObject.gotoPage.recordCount,
                       limit: 12,
                        theme: "#1e9fff",
                        layout: ['prev', 'page', 'next', 'skip', 'count'],
                        curr: location.hash.replace('#!laypageValue=', ''),
                        hash: 'laypageValue',
                        jump: function (obj, first) {
                            //obj包含了当前分页的所有参数，比如：
                            //alert(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                            //alert(obj.limit); //得到每页显示的条数
                            //首次不执行
                            if (!first) {
                                $("#gotoPage").val(obj.curr);
                                fillPageInfo($("#gotoPage").val());
                            } else {
                                //alert("first run begin query!");
                            }
                        }
                    });
                });
            }

            $(document).ready(function () {
               $("#queryButton").click(function () {
                    $("#gotoPage").val(1);
                    fillPageInfo($("#gotoPage").val());
                });

                $("#resetButton").click(function () {
                  $("#gotoPage").val(1);
                    $("#username").val("")
                    $("#password").val("");
                    $("#beginAge").val("");
                    $("#endAge").val("");
                    $("#beginInsertDate").val("");
                    $("#endInsertDate").val("");
                });

                $("#gotoPage").val(1);
                fillPageInfo(1);
            });

            form.render();
        </script>
    </body>
</html>

立志做一个佳娃~

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
《layui宇宙版教程》：分页组件laypage

《Layui宇宙版教程》提供2000人的QQ群进行交流学习，QQ群号：1046961650，或通过手机QQ扫描二维码进入：1.20 分页组件laypagelayPage致力于提供极致的分页逻辑，既可轻松胜任异步分页，也可作为页面刷新式分页。模块加载名称：laypage。1.20.1 快速使用laypage的使用非常简单，指向一个用于存放分页的容器，通过服务端得到一些初始值，即可完成分页渲染测试代码如下：<!DOCTYPE html><...
复制链接

扫一扫

专栏目录