分页初探

首先感谢琛哥的耐心讲解，恕己愚钝。若有不足，欢迎斧正。
分页在地市报中很常见，现总结一下，以供参考。(绿色框内的即是分页)

分页

<div class="page cls-paging">
            <trs-pagenation-left page-count="page" callback="selectPageNum()" is-select-pagecount="false"></trs-pagenation-left>
            <pagination total-items="page.ITEMCOUNT" ng-change="pageChanged()" ng-model="page.CURRPAGE" max-size="6" class="pagination-sm page_left" boundary-links="true" items-per-page="page.PAGESIZE" rotate="false" num-pages="page.PAGECOUNT" first-text="首页" previous-text="上一页"
                next-text="下一页" last-text="末页"></pagination>
            <trs-pagenation-right callback="jumpToPage()" currpage="data.copyCurrPage" page="page"></trs-pagenation-right>
</div>

分页是个指令，上面的代码即是引用该指令的html代码

分页中重要的四个参数：

CURRPAGE 当前页，即可点击的数字页数1,2,3,4,5...
PAGESIZE 单页显示数据个数
ITEMCOUNT 数据总个数

PAGECOUNT 总页数

  下面的代码即是分页对应的三个方法：

  /**
   * [selectPageNum description]选择分页条数
   * @return {[type]} [description]
   */
  $scope.selectPageNum = function() {
      $scope.data.copyCurrPage = 1;
      initData();
  };
  /**
   * [pageChanged description]跳转到下一页
   * @return {[type]} [description]
   */
  $scope.pageChanged = function() {
      params.pageNum = $scope.page.CURRPAGE;
      $scope.data.copyCurrPage = $scope.page.CURRPAGE;
      initData();
  };
  /**
   * [jumpToPage description]跳转到指定页
   * @return {[type]} [description]
   */
  $scope.jumpToPage = function() {
      if ($scope.data.copyCurrPage > $scope.page.PAGECOUNT) {
          $scope.data.copyCurrPage = $scope.page.PAGECOUNT;
      }
      params.pageNum = $scope.data.copyCurrPage;
      initData();
  };

callback="selectPageNum()" 选择单页显示的数据个数，is-select-pagecount="false"配置选择单页显示个数是否可用，true表示可用，false表示不可用。
ng-change="pageChanged()" 当分页改变时执行该方法，params.pageNum中的pageNum是后台所需的页码参数。$scope.data.copyCurrPage = $scope.page.CURRPAGE，这一句是为了在跳转输入框输入页码但还没有点击跳转时防止页码跟着变化。
callback="jumpToPage()" 这一句是在页码跳转框内输入页码点击跳转时执行，if判断是当输入页码大于总页码时，让输入页码取最大页码值。

推荐阅读更多精彩内容