首先先设计分页组件
function pagination(opt,ele){
this.rc = opt.recordCount;//总记录数
this.pageSize = opt.pageSize;//每张页面的大小
this.pageIndexChanged = opt.pageIndexChanged;//接口 分页处理的方法
this.currentPage = -1;//当前页
this.numberLinks = [];//按钮
this.ele = ele;
this.init();//初始化,画图。
}
//开始画图
pagination.prototype.init = function(){
//总页面数
this.totalPage = (this.rc/this.pageSize);
var othis = this;
var ele = document.getElementById(this.ele);
let bottomPage = document.createElement("div");
bottomPage.className="bottomPage";
ele.appendChild(bottomPage);
let p_num = document.createElement("span");
p_num.className="p_num";
bottomPage.appendChild(p_num);
let pn_prev = document.createElement("a");
pn_prev.className = "pn_prev";
pn_prev.innerText="<上一页";
pn_prev.onclick = function(){
if(othis.currentPage>1){
othis.toPage(othis.currentPage-1);//如果当前页不是第一页,点击上一页时将当前页-1
}
}
p_num.appendChild(pn_prev);
//这里使用for循环进行画图,需要多少页面就画多少
for(let i = 1;i<=this.rc/this.pageSize+1;i++){
let pn = document.createElement("a");
pn.innerText=i;
pn.className = "pn";
p_num.appendChild(pn);
pn.style.backgroundColor = "#f7f7f7"
this.numberLinks[i] = pn;
pn.onclick = function(){
othis.toPage(i); //点击后跳转到相应页面
}
}
let pn_next = document.createElement("a");
pn_next.className="pn_next";
pn_next.innerText="下一页>"
pn_next.onclick = function(){
if(othis.currentPage<othis.totalPage){
othis.toPage(othis.currentPage+1);//如果当前页不是最后一页,点击下一页时将当前页+1
}
}
p_num.appendChild(pn_next);
this.toPage(1);//初始当前页为第一页
}
//topage方法,点击上一页,下一页,其他页面时执行的方法
//传入要跳转到的页面
pagination.prototype.toPage = function(pageNum){
//如果当前页!=要跳转到的页面
if(this.currentPage!=pageNum){
//改变按钮样式
this.changeLinkBtnStyle(this.currentPage,pageNum);
if(this.pageIndexChanged){
//页面索引改变 执行相应的方法
this.pageIndexChanged(this.currentPage,pageNum);
}
//最后将当前页赋值为新索引
this.currentPage = pageNum;
}
}
//改变按钮样式
pagination.prototype.changeLinkBtnStyle = function(oldPn,newPn){
let pageBtns = this.numberLinks;
if(pageBtns!=null){
pageBtns[newPn].style.backgroundColor="blue";
if(oldPn!=-1){
pageBtns[oldPn].style.backgroundColor="#f7f7f7";
}
}
}
效果图: |
我的页面容量是前端传给后端的
后端传给前端的数据:总记录数,当前页中的数据
entity:
public class Page {
public int recordCount; //总条数
public List<Commodity> commodityList;//查询的集合
public int getRecordCount() {
return recordCount;
}
public void setRecordCount(int recordCount) {
this.recordCount = recordCount;
}
public List<Commodity> getCommodityList() {
return commodityList;
}
public void setCommodityList(List<Commodity> commodityList) {
this.commodityList = commodityList;
}
}
mapper:
<select id="selectCommodityByPage" resultType="JD.entity.Commodity">
select commodity_id as commodityId , commodity_name as commodityName , commodity_price as commodityPrice , commodity_img as commodityImg
from commodity limit #{currentPage},#{pageSize};
</select>
<select id="selectCountCommodity" resultType="int">
select count(*) from commodity;
</select>
controller:
@RequestMapping("/showCommoditiesByPage")
public Page getCommoditiesByPage(HttpServletRequest req){
int currentPage = Integer.parseInt(req.getParameter("currentPage"));
int pageSize = Integer.parseInt(req.getParameter("pageSize"));
int index = (currentPage-1)*pageSize;
Page page = commodityService.getCommoditiesByPage(index, pageSize);
return page;
}