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=` 

                       
                           «
                       
                   
`;
         //通过循环动态生成页码
       for(var i=0;i${i+1}`;
       }
       this.oul.innerHTML=str1;
       //下一页按钮
       this.oul.innerHTML=str1+` 

            
                 »
             
        
`;
        //遍历所有的li，将他们的默认样式去除
       for(var j=1;j

切换功能

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

 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.res[i].Id}
                   ${this.res[i].name}
                   ${this.res[i].sex}
                   ${this.res[i].age}
                   ${this.res[i].chinese}
                   ${this.res[i].math}
                   ${this.res[i].English}
                   
                   
                       删除
                       修改
                   
               `;
           }
       }
       this.tbody.innerHTML=str;
   }
}

实现效果