I have used datatables for paging before. Although its functions are very perfect, the code is a little complicated and the style is not very beautiful. I found the laypage paging plug-in inadvertently. It is very user-friendly for the paging code writing without sorting and fuzzy query. Record.
1. Rendering
2.html page
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>
<!--Pagination data holder-->
<tbody></tbody>
<!---------------->
</table>
<!--Paging container-->
<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;// The current page, the initial value is set to 1
let limit = 10;//Number of items per page, the initial value is set to 10
let total;// total number of records
$(document).ready(function () {
getInfo();// Get data
toPage();// paging
});
// retrieve data
function getInfo() {
$.ajax({
type: "post",
url: "district",
async: false,// Set synchronous request, lock the browser before loading data
dataType: 'json',
data: {
"curr": curr, // query page number
"limit": limit, // number of entries per page
},
success: successFu
});
}
// data request succeeded
function successFu(pager) {
//console.log(data);
// 1. Clear the original data
$("tbody").html("");
// 2. Reassign page number, number of records, total number of records
curr = pager.start;
limit = pager.limit;
total = pager.total;
// 3. Render data
// When the current query has no data
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);
}
// do pagination
function toPage() {
layui.use('laypage', function () {
let laypage = layui.laypage;
// call pagination
laypage.render({
// id of the paging container
elem: 'page',// *Required parameter
// The total number of data, obtained from the server
count: total,// *required parameter
// The number of bars displayed per page. laypage will use count and limit to calculate the number of pages.
//limit:limit,
// start page
//curr:Pager,
// The number of consecutive page numbers
//groups:5,
// Customize the options for the number of items per page
limits: [10, 25, 50, 100],
// Customize the first page, last page, previous page, next page text
first: 'Home',
last: 'Last page',
prev: '<em><<</em>',
next: '<em>>></em>',
// custom theme
theme: "#FF5722",
// custom layout
layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
// render data
jump: function (data, first) {
// data contains all the parameters of the current page
curr = data.curr;
limit = data.limit;
// do not execute the first time
if (!first) {
getInfo();
}
}
});
})
}
</script>
</body>
</html>
3. servlet page
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("Start querying data...");
// 1. Get page data
Integer curr = NumberUtils.createInteger(request.getParameter("curr"));// current page
Integer limit = NumberUtils.createInteger(request.getParameter("limit"));// 条数
DistrictViewDao dao = new DistrictViewDao();
// 2. Query the database
// 2.1 Query the total number of records
int total = dao.getTotal();
// 2.2 Query paging data
List<DistrictView> data = dao.find(curr,limit);
Pager<DistrictView> pager = new Pager<DistrictView>();
// 3. Encapsulate the paging class object
pager.setCurr(curr);
pager.setLimit(limit);
pager.setTotal(total);
pager.setData(data);
// 4. Convert to json format data
JSON json = JSONSerializer.toJSON(pager);
PrintWriter out = response.getWriter();
// 4. Response to client
out.println(json.toString());
out.flush();
out.close();
}
}
4.dao layers
DistrictViewDao.java
package com.XXX.dao;
import com.XXX.pojo.DistrictView;
import org.apache.ibatis.session.SqlSession;
import java.util.List;
public class DistrictViewDao {
/**
* Get the total number of records
*
* @return the total number of records
*/
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;
}
/**
* Query paging data
*
* @param start query page number
* @param limit number of records per page
* @return paging data
*/
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. Others
Pager.java
package com.XXX.pager;
import java.util.List;
/**
* Paging package class
*
* @param <T>
*/
public class Pager<T> {
// current page
private Integer curr;
// number of entries per page
private Integer limit;
// total
private Integer total;
// paging data
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;
/**
* District table view class
*/
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;
}
}