后台管理实现分页显示----核心分页对象
需求
实现简单的分页管理数据的页面功能,类似下面
采用物理分页方式:即每打开一页都交互从后台取回需要页数据
同时也有逻辑分页方式,就是一次交互,后台把所有的所有页面数据一起发过来,前端自己分页显示。虽交互简单,但也不没了实时性,不提倡。
解决方法
物理分页,交互核心对象Page
package xyz.cglzwz.bean;
import java.util.List;
/**
* 分页对象
* 用于封装当前页的分页相关的所有数据
*
* @author chgl16
* @date 2018.10.8
*/
public class Page {
/** 当前页的数据 */
private List<Transaction> dataArray;
/** 首页 */
private Integer firstPage;
/** 上一页 */
private Integer prePage;
/** 下一页 */
private Integer nextPage;
/** 末页、总页数 */
private Integer totalPage;
/** 当前页 */
private Integer currentPage;
/** 总记录数 */
private Integer totalCount;
/** 每页显示的记录数 */
private Integer pageSize;
public List<Transaction> getDataArray() {
return dataArray;
}
public void setDataArray(List<Transaction> dataArray) {
this.dataArray = dataArray;
}
public Integer getFirstPage() {
// 首页直接返回1
return 1;
}
public void setFirstPage(Integer firstPage) {
this.firstPage = firstPage;
}
/**
* 计算上一页
*
* @return prePage
*/
public Integer getPrePage() {
return this.getCurrentPage() == this.getFirstPage() ? 1 : this.getCurrentPage() - 1;
}
public void setPrePage(Integer prePage) {
this.prePage = prePage;
}
/**
* 计算下一页
*
* @return nextPage
*/
public Integer getNextPage() {
return this.getCurrentPage() == this.getTotalPage() ? this.getTotalPage() : this.getCurrentPage() + 1;
}
public void setNextPage(Integer nextPage) {
this.nextPage = nextPage;
}
/**
* 通过记录数计算总页数
*
* @return totalPage
*/
public Integer getTotalPage() {
return this.getTotalCount() % this.getPageSize()==0 ?
this.getTotalCount() / this.getPageSize() :
this.getTotalCount() / this.getPageSize() + 1;
}
public void setTotalPage(Integer totalPage) {
this.totalPage = totalPage;
}
public Integer getCurrentPage() {
return currentPage;
}
public void setCurrentPage(Integer currentPage) {
this.currentPage = currentPage;
}
public Integer getTotalCount() {
return totalCount;
}
public void setTotalCount(Integer totalCount) {
this.totalCount = totalCount;
}
public Integer getPageSize() {
return pageSize;
}
public void setPageSize(Integer pageSize) {
this.pageSize = pageSize;
}
}
业务层只需要根据页面大小pageSize和页码currentPage的需求,封装返回Page对象即可
package xyz.cglzwz.service;
import xyz.cglzwz.bean.Page;
/**
* 获取返回需求页页面数据业务
*
* @author chgl16
* @date 2018.10.12
*/
public interface PageService {
/**
* 通过传递当前页码和页面大小
* 来获取当前页的数据,封装在Page返回
*
* @param currentPage
* @param pageSize
* @return Page
*/
public Page getPage(Integer currentPage, Integer pageSize) throws Exception;
}
ajax交互请求(传递页面大小和请求页码)
$.ajax ({
type: "POST",
url: "getdata",
dataType: "json",
data: {
"currentPage":currentPage,
"pageSize":pageSize,
},
success:function(data) {
console.info("获取数据成功");
// 封装page对象
setPage(data);
// 动态<td>填充当前页
fillPage();
// 页面显示记录数和页数信息
showInfomation();
// 刷新显示脚步页码布局
paginationFresh();
},
error:function(data) {
console.error("获取数据失败");
}
});
交互json
{
"currentPage":1,
"dataArray":[
{"address":"","amount":0,"flag":false,"id":1,"log":"","time":"","today":"","yesterday":""},
{"address":"","amount":0,"flag":false,"id":8888,"log":"","time":"","today":"","yesterday":""},
{"address":"","amount":0,"flag":false,"id":8889,"log":"","time":"","today":"","yesterday":""},
{"address":"","amount":0,"flag":false,"id":8890,"log":"","time":"","today":"","yesterday":""}
],
"firstPage":1,
"nextPage":1,
"pageSize":5,
"prePage":1,
"totalCount":4,
"totalPage":1
}