PHP+Bootstrap+原生Ajax+MySQL实现前后端交互（下）——实现分页效果

思路

通过总数据的条数/每一页显示的条数，并向上取整，就可以得到页码数，并动态添加到ul中。

动态创建页码

//每一页显示的信息数
     this.num=2;
      //当前页面的索引
      this.index=0;
      //找到容器ul
      this.oul=document.querySelector(".pagination");

 //动态生成页码
  createPage(){
  //用来计算创建的最大页码数
       this.maxNum=Math.ceil(this.res.length/this.num);
       //console.log(this.maxNum);
       // 上一页按钮
       var str1=` <li class="page-item">
                       <a href="javascript:;" class="page-link" aria-label="Previous">
                           <span aria-hidden="true">&laquo;</span>
                       </a>
                   </li>`;
         //通过循环动态生成页码
       for(var i=0;i<this.maxNum;i++){
       //为li添加页码数字
           str1 += `<li class="page-item"><a class="page-link" href="javascript:;">${i+1}</a></li>`;
       }
       this.oul.innerHTML=str1;
       //下一页按钮