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");
      }
    }
  }

简单的分页功能的实现，每个点击事件都是独立执行，比较简单易懂~