Jquery、Ajax實現新聞列表頁分頁功能

前端頁面官網的開發，離不開新聞列表，新聞列表一般都會有分頁的功能，下面是我自己總結加查找網上資料寫的一個分頁的功能，記錄一下。

首先，官網的開發建立在前后端分離的基礎上；

再有，后端小伙伴們提供列表頁數據的接口；

最后，從接口拿數據，渲染到頁面上。

如圖，點擊上一頁返回前面一頁的數據，點擊下一頁，返回后面一頁的數據，點擊1、2...跳轉到相應的頁面的數據。

上代碼，先來布局部分html代碼

<div class="main-list-col">
   <div class="list-main-lists main-lists-lastest"></div>   //存放獲取的數據內容
      <div class="list-pages listpage-latest">
         <a href="javascript:" class="pre-page"></a>   //上一頁
         <div class="pagesin"></div>                    //頁碼數
         <a href="javascript:" class="next-page"></a>  //下一頁
         <a href="javascript:" class="cur-page"></a>   //第幾頁
         <a href="javascript:" class="all-page"></a>   //共幾頁
      </div>
</div>

布局其實很清楚，類名就表示了每個對應的內容是什么。

對應js部分代碼

var totlePage,totleSize;        //聲明變量，總頁數totlepage,列表頁總新聞條數totleSize var curPage = 1;                //設置當前頁為curPage=1第一頁
getnewsList(1);                 //頁面加載時，默認獲取的是第一頁的數據；getNewsList()獲取頁面數據Ajax的函數；
 $(".listpage-latest .pagesin").on("click","a",function(){      //每頁頁碼，及點擊頁碼相應的跳轉；頁碼需要根據獲取的總數據條數計算出來並拼到頁面上，所以js事件要用on，一定要用on，不然點擊事件沒有效果
      $(".main-lists-lastest").empty();   //不管到哪一步，點擊頁碼首頁得清除那個頁面的數據，再加載新的內容進去，所以empty了解一下，我這里用了a標簽的rel屬性來判斷加載 var rel = $(this).attr("rel");
      curPage = rel;
      console.log(rel);
      if(rel){
        getnewsList(rel);
        $(this).eq(rel).addClass("active-pages");
      }
  });
$(".listpage-latest .next-page").click(function(event){   //下一頁
    $(".main-lists-lastest").empty(); 
    if(curPage > totlePage-1){   //如果當前頁碼大於總頁碼就只加載最后一頁，並彈框
      curPage = totlePage;
      alert("the last page");
      getnewsList(curPage);
    }else{
      curPage++;
      getnewsList(curPage);
    }
  });
$(".listpage-latest .pre-page").click(function(event){   //上一頁
      $(".main-lists-lastest").empty(); 
      if(curPage < 2){  //如果當前頁碼小於第一頁就只加載第一頁，並彈框
        curPage = 1;
        getnewsList(1); 
        alert("the first page");
      }else{
        curPage--;
        getnewsList(curPage); 
      }
  });
function getnewsList(page){   //Ajax獲取新聞列表的數據內容
    $.ajax({
      type: "GET",
      url: "https://",   //后端小伙伴給的新聞列表頁的接口
      dataType: "json",
      data: {             //接口參數的設置 "gameid": 4,
        "page": page,
        "size":6,
        "type": 0,
      },
      success:function(data){
        if(data.c && data.d){
          totleSize = data.t;
          console.log(totleSize);
          totlePage = Math.ceil(totleSize/6);  //計算總頁數
          page = curPage;
          var data = data.d;
          var newsarray = [];
          for(var i=0;i<data.length;i++){
            newsarray = data[i];
            var newsdate = newsarray.date;
            var splitDate = newsdate.split("-");
            $(".main-lists-lastest").append($('<a href="show.html?newsid='+newsarray.id+'"><img src='+newsarray.thumb+'><p><span>'+newsarray.title+'</span>'+newsarray.description+'</p><p>'+splitDate[2]+'<span>'+splitDate[0]+'-'+splitDate[1]+'</span></p></a>'));
          } 
        }
      },
      complete:function(){
        getPageBar();
      }
    });
  }
function getPageBar(){
    $(".listpage-latest .pagesin").empty();
    $(".listpage-latest .pre-page").empty();
    $(".listpage-latest .all-page").text("共"+totlePage+"頁");
    $(".listpage-latest .cur-page").text("第"+curPage+"頁");
    $(".listpage-latest .pre-page").text("上一頁");
    $(".listpage-latest .next-page").text("下一頁");
    for(var j=1;j<totlePage+1;j++){
      $(".listpage-latest .pagesin").append($('<a href="javascript:" rel='+j+'>'+j+'</a>'));
      if(j == curPage){
        $(".listpage-latest .pagesin a").eq((j-1)).addClass("active-pages");
      }
    }
  }

 簡單的分頁功能的實現，每個點擊事件都是獨立執行，比較簡單易懂~