后端处理分页

html结构

<div class="clear"></div>
   <div class="paging">
    <a class="prevpage">&lt;</a>
    <div class="pagenum"></div>
    <a class="nextpage">&gt;</a>
  </div>
<div class="clear"></div>';
  

CSS分页样式

.paging {
  margin: 20px auto;
  display: none;

  a {
    width: 32px;
    height: 32px;
    line-height: 32px;
    background-color: white;
    border: 1px solid #ECEDEE;
    border-radius:4px;
    margin: 0px 5px;
    cursor: pointer;
    display: block;
    float: left;
  }


  .pagenum {
    float: left;

    a {
      &.selected {
        background-color: #F85415;
        color: white;
        border-color: #F85415;
      }

      &.moreIcon {
        cursor: text;
      }
    }
  }
}

Jquery设置

数据结构参考：

// 视频
var pagingHtmlObj1 = $(".tabCont1 .paging"); //html分页对象
var pagingSet1 = {
  curObj: 1, //第一个对象 只是用来标记
  curPage: 1, //当前页
  totalPage: 1, //总页码
  perPage: 10 //每页显示10条数据
};
(function ($) {
  $.myPaging = {
    init: function () {
      //初始化分页点击事件
      $.myPaging.initPage(pagingHtmlObj1, pagingSet1);

      //初始化获取的列表数据
      $.myPaging.getListInfo(pagingSet1);

    },
    //从服务器获取的list数据
    getListInfo: function (pagingSet1) {
      var pagingSet = pagingSet1;
      var pagingHtmlObj = pagingHtmlObj1;
      var data = {
        url: '后台接口地址'
      };
      //分页设置
      data.iDisplayStart = (pagingSet.perPage) * (pagingSet.curPage - 1); //起始页
      data.iDisplayLength = pagingSet.perPage; //获取数据长度 


      //ajax获取数据
      $.general.AjaxRequest(data, function (data) {
        if (data.success && data) {
          if (data.data.aaData.length > 0) {
            //分页设置
            var totalRecords = data.data.iTotalDisplayRecords;
            var total_page = Math.ceil(totalRecords / pagingSet.perPage);
            if (total_page == 1) {
              pagingHtmlObj.css('display', 'none');
            } else {
              pagingHtmlObj.css('display', 'inline-table');
            }
            //分页设置
            var articleDataObj = data.data.aaData;
            var htmls = '';
            //中间拼接html
            $(".articleList").html(htmls);

            //分页设置
            pagingSet.totalPage = total_page;
            $.myPaging.initPageNum(pagingHtmlObj, pagingSet);
            //分页设置
          } else {
            pagingHtmlObj.hide();
            var htmls = '<div class="norecord">' +
              '<span>暂无数据<span>' +
              '</div>';
            $(".articleList").html(htmls);
          }
        } else {
          $.general.showMsg(data.reason);
        }
      }, null, null, true);
    },


    //分页开始 $dom paging对象
    initPage: function ($dom, pagingSet) {
      //上一页
      $dom.find(".prevpage").click(function () {
        $.myPaging.turnPage(pagingSet.curPage - 1, pagingSet);
      });
      //下一页
      $dom.find(".nextpage").click(function () {
        $.myPaging.turnPage(pagingSet.curPage + 1, pagingSet);
      });
      //首页
      $dom.find(".firstpage").click(function () {
        $.myPaging.turnPage(1, pagingSet);
      });
      //尾页
      $dom.find(".lastpage").click(function () {
        $.myPaging.turnPage(pagingSet.totalPage, pagingSet);
      });
      //中间页1,2,3
      $dom.on("click", ".pagenum .changeNum", function () {
        $.myPaging.turnPage($(this).text(), pagingSet);
      });
    },
    turnPage: function (page, pagingSet) {
      if (parseInt(page) < 1 || parseInt(page) > parseInt(pagingSet.totalPage)) {
        return;
      } else {
        pagingSet.curPage = parseInt(page);
        //加载列表信息
        var curObj = pagingSet.curObj;
        if (curObj == "1") {
          $.myPaging.getListInfo(pagingSet1);
        }
      }
      //翻页完毕，定位到指定的位置
      $('html, body').animate({
        scrollTop: $('.topTab').offset().top
      });
    },
    initPageNum: function ($dom, pagingSet) {
      var $pageNum = $dom.find(".pagenum").html("");
      var htmls = '';
      var total_Page = parseInt(pagingSet.totalPage);
      var cur_Page = parseInt(pagingSet.curPage);
      if (total_Page > 4) {
        //判断当前页
        if (cur_Page < 4) {
          for (var i = 1; i <= 4; i++) {
            if (cur_Page == i) {
              htmls += "<a class='selected changeNum'>" + i + "</a>";
            } else {
              htmls += "<a class='changeNum'>" + i + "</a>";
            }
          }
          htmls += '<a class="moreIcon">...</a><a class=\'changeNum\'>' + pagingSet.totalPage + '</a>'
        } else {
          if (cur_Page > 4) {
            htmls += '<a class=\'changeNum\'>1</a><a class="moreIcon">...</a>';
          }
          if (cur_Page + 3 < total_Page) {
            for (var i = cur_Page - 3; i <= cur_Page + 3; i++) {
              if (cur_Page == i) {
                htmls += "<a class='selected changeNum'>" + i + "</a>";
              } else {
                htmls += "<a class='changeNum'>" + i + "</a>";
              }
            }
            htmls += '<a class="moreIcon">...</a><a  class=\'changeNum\'>' + pagingSet.totalPage + '</a>'
          } else {
            for (var i = cur_Page - 3; i <= total_Page; i++) {
              if (cur_Page == i) {
                htmls += "<a class='selected changeNum'>" + i + "</a>";
              } else {
                htmls += "<a  class='changeNum'>" + i + "</a>";
              }
            }
          }
        }
      } else {
        //展示全部页数
        for (var i = 1; i <= total_Page; i++) {
          if (cur_Page == i) {
            htmls += "<a class='selected changeNum'>" + i + "</a>";
          } else {
            htmls += "<a class='changeNum'>" + i + "</a>";
          }
        }
      }
      $pageNum.html(htmls);
    },
    //分页结束


  }
})(jQuery);

如果是采用"加载更多"的方式来展示数据，参考如下