首先先设计分页组件

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;
    }