《layui宇宙版教程》:分页组件laypage
《Layui宇宙版教程》提供2000人的QQ群进行交流学习,QQ群号:1046961650,或通过手机QQ扫描二维码进入:
1.20 分页组件laypage
layPage致力于提供极致的分页逻辑,既可轻松胜任异步分页,也可作为页面刷新式分页。
模块加载名称:laypage。
1.20.1 快速使用
laypage的使用非常简单,指向一个用于存放分页的容器,通过服务端得到一些初始值,即可完成分页渲染
测试代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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 id="test1"></div>
<script>
var laypage = layui.laypage;
//执行一个laypage实例
laypage.render({
elem: 'test1',
//注意,这里的 test1 是 ID,不用加 # 号
count: 50 //数据总数,从服务端得到
});
</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>
<meta charset="utf-8">
<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 id="test1"></div>
<script>
var laypage = layui.laypage;
//执行一个laypage实例
laypage.render({
elem: document.getElementById("test1"),
count: 50 //数据总数,从服务端得到
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.20.2.2 count
count值类型Number。
数据总记录数,一般通过服务端得到。
测试代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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 id="test1"></div>
<script>
var laypage = layui.laypage;
//执行一个laypage实例
laypage.render({
elem: "test1",
count: 500 //数据总数,从服务端得到
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.20.2.3 limit
limit值类型Number。
每页显示的条数。laypage将会借助count和limit计算出分页数。
测试代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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 id="test1"></div>
<script>
var laypage = layui.laypage;
//执行一个laypage实例
laypage.render({
elem: "test1",
count: 500, //数据总数,从服务端得到
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>
<meta charset="utf-8">
<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 id="test1"></div>
<script>
var laypage = layui.laypage;
laypage.render({
elem: "test1",
count: 5000,
layout: ['prev', 'page', 'next', 'limit', 'refresh', 'skip', 'count']
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.20.2.5 limits
limits值类型Array。每页条数的选择项。如果layout参数开启了limit,则会出现每页条数的select选择框。
测试代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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 id="test1"></div>
<script>
var laypage = layui.laypage;
laypage.render({
elem: "test1",
count: 5000,
limits: [100, 300, 500, 700, 900],
layout: ['prev', 'page', 'next', 'limit', 'refresh', 'skip', 'count']
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.20.2.6 groups
groups值类型Number。连续出现的页码个数。
测试代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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 id="test1"></div>
<script>
var laypage = layui.laypage;
laypage.render({
elem: "test1",
count: 5000,
groups: 7,
limits: [100, 300, 500, 700, 900],
layout: ['prev', 'page', 'next', 'limit', 'refresh', 'skip', 'count']
});
</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>
<meta charset="utf-8">
<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 id="test1"></div>
<div id="test2"></div>
<script>
var laypage = layui.laypage;
laypage.render({
elem: "test1",
count: 5000,
first: "我是首页",
prev: "我是上一页",
next: "我是下一页",
last: "我是末页",
layout: ['prev', 'page', 'next', 'limit', 'refresh', 'skip', 'count']
});
laypage.render({
elem: "test2",
count: 5000,
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>
<meta charset="utf-8">
<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 id="test1"></div>
<script>
var laypage = layui.laypage;
laypage.render({
elem: "test1",
theme: "#ff007f",
count: 5000,
first: "首页",
prev: "上一页",
next: "下一页",
last: "末页"
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.20.2.9 curr
curr值类型Number。起始页。
测试代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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 id="test1"></div>
<script>
var laypage = layui.laypage;
laypage.render({
elem: "test1",
theme: "#ff007f",
curr: 88,
count: 5000,
first: "首页",
prev: "上一页",
next: "下一页",
last: "末页"
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.20.2.10 hash
当使用如下代码创建分页:
<div id="test1"></div>
<script>
var laypage = layui.laypage;
laypage.render({
elem: "test1",
theme: "#ff007f",
curr: 88,
count: 5000,
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',
count: 500,
curr: location.hash.replace('#!fenye=', ''), //获取起始页
hash: 'fenye' //自定义hash值
});
测试代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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 id="test1"></div>
<script>
var laypage = layui.laypage;
laypage.render({
elem: "test1",
theme: "#ff007f",
count: 5000,
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>
<meta charset="utf-8">
<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 id="test1"></div>
<script>
var laypage = layui.laypage;
laypage.render({
elem: 'test1',
count: 70, //数据总数,从服务端得到
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>