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;
       //下一页按钮
       this.oul.innerHTML=str1+` <li class="page-item">
            <a href="javascript:;" aria-label="Next" class="page-link">
                 <span aria-hidden="true">&raquo;</span>
             </a>
        </li>`;
        //遍历所有的li，将他们的默认样式去除
       for(var j=1;j<this.oul.children.length-1;j++){
           this.oul.children[j].className="page-item";
       }
       //默认给第二个li添加默认选中的样式（也就是第一个有数字的li）
       this.oul.children[this.index+1].className="page-item active";
       this.display();
   }

切换功能

通过点击页码按钮或者上一页和下一页按钮，可以实现数据的切换

 clickEvent(){
   var that=this;
   //为第二个到倒数第二个的li添加点击事件，实现对应数据的切换
      $(".pagination li:lt("+(this.maxNum+1)+"):gt(0)").click(function () {
          //console.log(33)
          that.index=$(this).index()-1;
          //console.log(that.index)
          $(this).addClass("page-item active").siblings().removeClass("page-item active");
          that.display();
      });
      //上一页按钮的切换功能
      $(".pagination li").eq(0).click(function () {
          //console.log(444);
          //console.log(that.index)
          if(that.index==0){
          //如果到达第一页，当上一页按钮禁用
              $(this).addClass("page-item disabled");
          }else{
              that.index--;
              $(".pagination li").eq(that.index+1).addClass("page-item active").siblings().removeClass("page-item active");
          }
          that.display();
      });
      //下一页按钮的切换功能
      $(".pagination").children("li:last-child").click(function () {
          //console.log(that.index)
          if(that.index==that.maxNum-1){
          //如果到达最后一页，将下一页按钮禁用
              $(this).addClass("page-item disabled");
          }else{
              that.index++;
              $(".pagination li").eq(that.index+1).addClass("page-item active").siblings().removeClass("page-item active");
              //console.log(that.index)
          }
          that.display();
      })
  }

分页效果的核心

 display(){
      var str="";
       for(var i=this.num * (this.index);i<this.num * (this.index+1);i++){
           if(i<this.res.length){
               str+=`<tr class="text-center">
                   <td>${this.res[i].Id}</td>
                   <td>${this.res[i].name}</td>
                   <td>${this.res[i].sex}</td>
                   <td>${this.res[i].age}</td>
                   <td>${this.res[i].chinese}</td>
                   <td>${this.res[i].math}</td>
                   <td>${this.res[i].English}</td>
                   <td>
                   <!--给删除按钮添加一个自定义的属性index，用来记录点击的删除按钮的这条记录的id-->
                       <button class="btn btn-danger" del="delete" index="${this.res[i].Id}">删除</button>
                       <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat" hf="update" index="${this.res[i].Id}">修改</button>
                   </td>
               </tr>`;
           }
       }
       this.tbody.innerHTML=str;
   }
}

实现效果