您的位置：首页 > 产品设计 > UI/UE

laypage分页完整案例

2018-03-12 13:25 183 查看
    之前用过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
9866
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;
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  laypage layui mybatis 后端 java
相关文章推荐
新的分享
章节导航