分别使用Ajax和layUI实现分页
1 使用Ajax实现分页
1.1 后端servelet代码截取
/**
* 查询所有的用户
* 目的：获取到当前页的数据，实现分页效果
* 思路：
* 1、需要拿到当前页的数据queryUsersLimit
* 2、分页相关的参数返回到前端：每页的条数、当前的页码数、数据的总条数
* @param userService
* @param session
* @param response
* @throws IOException
*/
public void queryList(IUserService userService,HttpServletRequest request,HttpServletResponse response) throws IOException {
//获取前台传递的页码数和每页要显示的条数
String pageIndex = request.getParameter("pageIndex");
String pageCount = request.getParameter("pageCount");
int index = Integer.valueOf(pageIndex);
int pageNum = Integer.valueOf(pageCount);
List<User> userList = userService.queryUsersLimit(index, pageNum);
int count = userService.getCount();
//创建PageInfo实体类对象，将分页所需的参数进行封装
PageInfo pageInfo = new PageInfo();
pageInfo.setCount(count);
pageInfo.setPageCount(pageNum);
pageInfo.setPageIndex(index);
pageInfo.setUserList(userList);
int pageTotals = count%pageNum==0?count/pageNum:(count/pageNum+1);
pageInfo.setPageTotals(pageTotals);
//将数据返回
PrintWriter out = response.getWriter();
out.write(JSON.toJSONString(pageInfo));
out.close();
}
1.2 前端代码片段
<body>
<table border="1px" cellpadding="0" cellspacing="0" align="center">
<thead>
<tr>
<th>用户ID</th>
<th>用户名称</th>
<th>用户密码</th>
<th>联系方式</th>
<th>家庭住址</th>
<th>住入日期</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div style="text-align:center;"></div>
<script src="./js/jquery-3.1.1.js"></script>
<script>
showList(1);
function showList(pageIndex){
$.ajax({
method:"get",
url:"AjaxUserServlet?option=query",
data:{
"pageIndex":pageIndex,
"pageCount":3
},
success:function(data){
//将数据转换为json对象
var jsonData = JSON.parse(data);
console.log(jsonData);
$('table tbody').empty();
$('div').empty();
//遍历数据，进行渲染
$.each(jsonData.userList,function(index,json){
$('table tbody').append(""+
json.uid+" "+
json.uname+" "+
json.upwd+" "+
json.phone+" "+
json.address+" "+
(json.hireDate==undefined?"":json.hireDate)+" 查看"+
"编辑删除"+" 1.3 返回数据类型实体类
package cn.yunhe.beans;
import java.util.List;
/**
* 封装的是分页相关的属性
* 总页数：
* 总数据条数/每页要显示的数据量---->存在余数的问题
* 刚好除尽，除的结果就是总页数
* 如果除不尽，去整后的结果+1
*/
public class PageInfo {
/**
* 页码数
*/
private int pageIndex;
/**
* 每页条数
*/
private int pageCount;
/**
* 总页数
*/
private int pageTotals;
/**
* 总数据条数
*/
private int count;
private List<User> userList;
public int getPageIndex() {
return pageIndex;
}
public void setPageIndex(int pageIndex) {
this.pageIndex = pageIndex;
}
public int getPageCount() {
return pageCount;
}
public void setPageCount(int pageCount) {
this.pageCount = pageCount;
}
public int getCount() {
return count;
}
public void setCount(int count) {
this.count = count;
}
public List<User> getUserList() {
return userList;
}
public void setUserList(List<User> userList) {
this.userList = userList;
}
public int getPageTotals() {
return pageTotals;
}
public void setPageTotals(int pageTotals) {
this.pageTotals = pageTotals;
}
}
2 使用layUI实现分页
2.1 前端代码片段
layui.use(['laydate','form','table'], function(){
var laydate = layui.laydate;
var form = layui.form;
var table = layui.table;
//使用layui中的方法级渲染数据
table.render({
//指定要渲染数据的表格
elem:"#member-tab"
,url:"UserServlet?option=query"
,cols:[[
{field:'uid', title: 'ID', sort: true}
,{field:'uname', title: '用户名'}
,{field:'upwd', title: '密码'}
,{field:'address', title: '所在地'}
,{field:'phone', title: '手机号'} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
,{field:'hireDate', title: '日期',templet:'{{ layui.util.toDateString(d.hireDate, "yyyy-MM-dd HH:mm:ss") }}'}
]]
,page:true
,limit:3
,limits:[1,2,3]
});
2.2 后端代码片段
/**
* 查询所有的用户
* @param userService
* @param session
* @param response
* @throws IOException
*/
public void queryList(IUserService userService,HttpServletRequest request,HttpServletResponse response) throws IOException {
//从请求参数中获取当前页及每页要显示的条数
String page = request.getParameter("page");
String limit = request.getParameter("limit");
List<User> userList = userService.queryUsersLimit(Integer.valueOf(page), Integer.valueOf(limit));
//总数据量
int count = userService.getCount();
//为了符合layui的数据格式，使用map集合对数据进行包装
Result result = new Result();
//将集合数据转换为json类型的字符串返回
String data = JSON.toJSONString(result.baseResult(userList, count));
PrintWriter out = response.getWriter();
out.write(data);
out.close();
}
2.3 返回数据类型的实体类
package cn.yunhe.beans;
import java.util.HashMap;
import java.util.Map;
public class Result {
/**
* 返回状态码
*/
private int code;
/**
* 返回的请求结果信息
*/
private String msg;
/**
* 返回数据总条数
*/
private int count;
/**
* 返回具体数据
*/
private Object data;
private Map<String,Object> map = new HashMap<String,Object>();
/**
* 返回基本请求结果，没有具体数据
* @return
*/
public Map<String,Object> baseResult(){
map.put("code", 0);
map.put("msg","success");
map.put("count",0);
map.put("data",null);
return map;
}
/**
* 返回带有数据的结果
* @param data
* 要返回的数据
* @param count
* 数据的总条数
* @return
*/
public Map<String,Object> baseResult(Object data,int count){
map.put("code", 0);
map.put("msg","success");
map.put("count",count);
map.put("data",data);
return map;
}
}