前端处理分页

html页面结构

<div class="pagingInfo">
  <span class="page pre">上一页</span>
  <span class="num"><em class="curPage">1</em>/<em class="totalPage">5</em></span>
  <span class="page next">下一页</span>
</div>

jQuery前端分页

(function ($) {
  $.myPaging = {
    pageNum: 8,//每页展示多少条数据

    //获取分页并展示数据
    loadMsgIcons: function () {
      var $iconsRewardDom = $('.live-msg-icon');
      //获取列表数据
      var dataMsgIconsList = $.general.getChaticoList();
      var dataLength = dataMsgIconsList.length;
      var totalPage = (dataLength % 8) == 0 ? (dataLength / 8) : parseInt((dataLength / 8)) + 1; //计算总页数
      $iconsRewardDom.find('.pagingInfo .num .totalPage').text(totalPage); //赋值总页数

      var curPage = parseInt($iconsRewardDom.find('.pagingInfo .num .curPage').text());
      //根据分页情况，获取数据
      var pageList = $.myPaging.getDataList(dataMsgIconsList, curPage);
      $iconsRewardDom.find('.live-msg-icon-list .list').html($.myPaging.appendIconsInfo(pageList));

      //上一页
      $iconsRewardDom.find('.pagingInfo .pre').click(function () {
        var curPageNum = parseInt($iconsRewardDom.find('.pagingInfo .num .curPage').text());
        if ((curPageNum - 1) != 0) {
          var curPageNow = curPageNum - 1;
          var pageList = $.myPaging.getDataList(dataMsgIconsList, curPageNow);

          $iconsRewardDom.find('.live-msg-icon-list .list').html($.myPaging.appendIconsInfo(pageList));
          $iconsRewardDom.find('.pagingInfo .num .curPage').text(curPageNum - 1);
        }
      });

      //下一页
      $iconsRewardDom.find('.pagingInfo .next').click(function () {
        var curPageNum = parseInt($iconsRewardDom.find('.pagingInfo .num .curPage').text());
        if ((curPageNum + 1) <= totalPage) {
          var curPageNow = curPageNum + 1;
          var pageList = $.myPaging.getDataList(dataMsgIconsList, curPageNow);
          $iconsRewardDom.find('.live-msg-icon-list .list').html($.myPaging.appendIconsInfo(pageList));
          $iconsRewardDom.find('.pagingInfo .num .curPage').text(curPageNum + 1);
        }
      });
    },

    //dataObj=为分页的所有数据，curPage=当前页
    getDataList: function (dataObj, curPage) {
      var pageNum = $.myPaging.pageNum;
      var pagingDataList = [];
      var start = (curPage - 1) * pageNum;
      var end = start + pageNum;
      return dataObj.slice(start, end);
    },
  }
  $.myPaging.init();
})(jQuery);