第一步： //创建几个php文件的全局变量先，后面会很多地方用到 var wholePhones="selectPhones.php"; var lowPowerPhones="lowPowerPhones.php"; var issuePhones="issuePhones.php"; var losePhones="losePhones.php";

    第二步：

// 根据不同类型sorting不同商品列表的共用的函数集合，两个参数分别表示从第几页开始查询，查询通过哪个接口     function sortPhones(page,pathUrl) {
          var sumPage;         $.ajax({
              type:'GET',             url:'data/'+pathUrl+'?page='+page,             success:function (result) {
                  var obj=JSON.parse(result);                 var phones=obj.phones;                 var count=obj.count;                 sumPage=Math.ceil(count/20);                 var html = "";                 for(var i=0;i
    
     
                 
      
                     
       
${phone.id}
                     
       
${isLock}
                     
       
${phone.station_id}
                     
       
                         操作                         
        
                             
         
开
                             
         
关
                             
         
删除
                         
        
                     
                     
       
                         详情                         
        
                             
         
 
          
 
           
 
            商品详情 
            关闭 
           
 
           
 
            
 
              
            
 
            
              
               
                
商品编号:    ${phone.id}
               
              
              
               
                
创建时间:
                
${phone.created}
               
               
                
更新时间:
                
${phone.updated}
               
               
                
名称:
                
${phone.name}
               
              
             
 
           
 
          
 
         
                         
        
                     
                 
      
             
     
                  `;                 }                 //没有想要sorting的商品时，显示的内容                 var noSortHtml=`                 
     
                     
      
                         
       
没有该类型的商品
                         
       
NA
                         
       
NA
                         
       
NA
                     
      
                 
     
             `;                 if(phones.length<=0){$(".list-phone").html(noSortHtml)}                 else{$(".list-phone").html(html)};             },             error:function (err) {
                  console.log(err)             }         })     }
    

第三步：

// 创建分页器的封装函数，重要！

function createPage(page,pathUrl) {
          var sumPage;         $.ajax({
              type:'GET',             url:'data/'+pathUrl+'?page='+page,             success:function (result) {
                  var obj=JSON.parse(result);                 var count=obj.count;                 sumPage=Math.ceil(count/20);                 // 将分页按钮渲染到HTML页面上                 var pageHtml="
上一页
";                 // 这个是默认激活的第一个页面，所以要单独写出来，不可以循环渲染                 pageHtml+="
1
";                 if(sumPage>=2){
                      for(var j=0;j
    
     ${j+2}`;                     }                 }                 else{pageHtml+=''};                 pageHtml+="
     
下一页
";                 $('.pagination').html(pageHtml);                 // 非点击按钮触发时候，其实只要保证上一页是禁用就行了，下一页没关系，它肯定不是禁用的                 if($('.firstItem').hasClass('active')){$('.previousPage').addClass('disabled')}                 else{$('.previousPage').removeClass('disabled')}                 if(sumPage<=1){$('.nextPage').addClass('disabled')}                 // 获取1-7按钮的集合（这里以后要优化，现在是数据库只有7条数据，后续如果数据多了就不能这样了）                 var list=document.querySelectorAll('li.itemPage');                 //点击1-7之间的按钮时触发事件                 $(list).click(function () {
                      $(this).addClass('active').siblings().removeClass('active');                     if($('.firstItem').hasClass('active')){$('.previousPage').addClass('disabled')}                     else{$('.previousPage').removeClass('disabled')}                     if($('.nextPage').prev().hasClass('active')){$('.nextPage').addClass('disabled')}                     else{$('.nextPage').removeClass('disabled')}                     // 获取分页器每页对应的页数，然后点击数字，查询不同页数的内容                     var i=$(this).children('a').html();                     console.log(i);                     // 再判断条件来分页显示对应的列表信息                     // 如果是商品总列表标签激活，就到总列表的php里面查询，以此类推                     if($('#wholePhones').hasClass('current')){sortPhones(i,wholePhones)}                     if($('#lowPowerPhones').hasClass('current')){sortPhones(i,lowPowerPhones)}                     if($('#issuePhones').hasClass('current')){sortPhones(i,issuePhones)}                     if($('#losePhones').hasClass('current')){sortPhoness(i,losePhones)}                 });                 // 在这里需要找到当前active的元素下标，然后点击时候要重新给index再赋值，因为慢一拍，所以点击时候index要+1                 var index=parseInt($('.pagination li.active').children('a').html());                 // 点击上一页按钮                 $('.previousPage').click(function () {
                      index=parseInt($('.pagination li.active').children('a').html())+1;                     if(index<=2){$('.firstItem').addClass('active').siblings().removeClass('active')}                     else{$('.pagination li.active').prev().addClass('active').siblings().removeClass('active');}                     //当上一页按钮后的一个元素是active时，让上一页按钮禁用                     if($('.firstItem').hasClass('active')){$('.previousPage').addClass('disabled')}                     else{$('.previousPage').removeClass('disabled')}                     if($('.nextPage').prev().hasClass('active')){$('.nextPage').addClass('disabled')}                     else{$('.nextPage').removeClass('disabled')}                     // 获取分页器每页对应的页数，然后点击数字，查询不同页数的内容                     var i=$('.pagination li.active').children('a').html();                     console.log(i);                     // 再判断条件来分页显示对应的列表信息                     // 如果是商品总列表标签激活，就到总列表的php里面查询，以此类推
    

　　　　　　　　　　　 if($('#wholePhones').hasClass('current')){sortPhones(i,wholePhones)}                     if($('#lowPowerPhones').hasClass('current')){sortPhones(i,lowPowerPhones)}                     if($('#issuePhones').hasClass('current')){sortPhones(i,issuePhones)}                     if($('#losePhones').hasClass('current')){sortPhones(i,losePhones)}

});                 //点击下一页按钮                 $('.nextPage').click(function (e) {
                      e.preventDefault();                     // 因为慢一拍，所以这里Index+1                     index=parseInt($('.pagination li.active').children('a').html())+1;                     if(index>sumPage){
                          $('.pagination li.active').addClass('active').siblings().removeClass('active');                     }                     else{$('.pagination li.active').next().addClass('active').siblings().removeClass('active');}                     //当下一页按钮前的一个元素是active时，让下一页按钮禁用                     if($('.firstItem').hasClass('active')){$('.previousPage').addClass('disabled')}                     else{$('.previousPage').removeClass('disabled')}                     if($('.nextPage').prev().hasClass('active')){$('.nextPage').addClass('disabled')}                     else{$('.nextPage').removeClass('disabled')}                     // 获取分页器每页对应的页数，然后点击数字，查询不同页数的内容                     var i=$('.pagination li.active').children('a').html();                     // 再判断条件来分页显示对应的列表信息                     // 如果是车辆总列表标签激活，就到总列表的php里面查询，以此类推

　　　　　　　　　　   if($('#wholePhones').hasClass('current')){sortPhones(i,wholePhones)}                     if($('#lowPowerPhones').hasClass('current')){sortPhones(i,lowPowerPhones)}                     if($('#issuePhones').hasClass('current')){sortPhones(i,issuePhones)}                     if($('#losePhones').hasClass('current')){sortPhones(i,losePhones)}

});             },             error:function (err) {
                  console.log(err)             }         })     } 第四步：

// 刚加载页面时显示商品总列表的分页器以及总商品列表详情，所以page和pathUrl两个参数分别是1和wholePhones，WholePhones是全部商品列表的后台接口     (function () {
          if($('#wholePhones').hasClass('current')){createPage(1,wholePhones);}         sortPhones(1,wholePhones);     })();