AngularJS自定义分页优化：限制页码显示数量

嘿，这个分页优化需求非常实用，我帮你调整代码来实现这个效果！核心思路是在控制器里生成需要展示的页码数组（包含页码和省略号标记），然后在模板里根据这个数组渲染，而不是直接循环所有总页数。

步骤1：修改控制器逻辑，生成显示页码数组 #

首先，我们需要把当前页码暴露到$scope中（原来的var定义模板访问不到），然后添加逻辑计算要显示的页码范围、处理省略号：

app.directive('postsGenreLink', function() { 
  return { 
    restrict: 'EA', 
    templateUrl: myLocalized.partials + 'posts-genre-link.html', 
    controller: ['$scope', '$element', '$routeParams', function($scope, $element, $routeParams) { 
      // 把当前页码绑定到$scope，供模板使用
      $scope.currentGenrePage = (!$routeParams.page) ? 1 : parseInt($routeParams.page);
      const linkPrefix = (!$routeParams.slug) ? 'page/' : 'genre/' + $routeParams.slug + '/page/'; 
      
      $scope.postsGenreLink = { 
        prevLink: linkPrefix + ($scope.currentGenrePage - 1), 
        hopLink: linkPrefix, 
        nextLink: linkPrefix + ($scope.currentGenrePage + 1), 
        sep: (!$element.attr('sep')) ? '|' : $element.attr('sep'), 
        prevLabel: (!$element.attr('prev-label')) ? 'Previous Page' : $element.attr('prev-label'), 
        nextLabel: (!$element.attr('next-label')) ? 'Next Page' : $element.attr('next-label'), 
        hopLabel: (!$element.attr('Jump')) ? 'Jump' : $element.attr('Jump') 
      }; 

      // ========== 新增：生成需要显示的页码数组 ==========
      const visibleRange = 2; // 自定义：前后各显示2页，可按需调整
      const totalPages = $scope.totalPages; // 从父作用域获取总页数
      $scope.displayPages = [];

      // 计算显示的起始和结束页码
      const startPage = Math.max(1, $scope.currentGenrePage - visibleRange);
      const endPage = Math.min(totalPages, $scope.currentGenrePage + visibleRange);

      // 添加前面的页码与省略号
      if (startPage > 1) {
        $scope.displayPages.push({ type: 'page', number: 1 });
        // 如果起始页和第1页之间有间隔，添加省略号
        if (startPage > 2) {
          $scope.displayPages.push({ type: 'ellipsis' });
        }
      }

      // 添加中间的连续页码
      for (let i = startPage; i <= endPage; i++) {
        $scope.displayPages.push({ type: 'page', number: i });
      }

      // 添加后面的省略号与最后一页
      if (endPage < totalPages) {
        // 如果结束页和最后一页之间有间隔，添加省略号
        if (endPage < totalPages - 1) {
          $scope.displayPages.push({ type: 'ellipsis' });
        }
        $scope.displayPages.push({ type: 'page', number: totalPages });
      }
    }] 
  }; 
});

步骤2：修改模板，渲染生成的页码数组 #

把模板中原来循环所有总页数的代码，替换成循环我们生成的displayPages数组，区分渲染页码和省略号：

<nav aria-label="..."> 
  <ul class="pagination pt-3"> 
    <li class="page-item" ng-class="{'disabled' : currentGenrePage == 1}"> 
      <a class="page-link" href="{{postsGenreLink.prevLink}}">{{postsGenreLink.prevLabel}}</a> 
    </li> 
    <!-- 替换原来的循环代码 -->
    <li ng-repeat="item in displayPages track by $index" 
        class="page-item" 
        ng-class="{'active' : item.type === 'page' && currentGenrePage === item.number, 'disabled' : item.type === 'ellipsis'}">
      <!-- 渲染可点击的页码 -->
      <a ng-if="item.type === 'page'" class="page-link" href="{{postsGenreLink.hopLink + item.number}}">{{item.number}}</a>
      <!-- 渲染不可点击的省略号 -->
      <span ng-if="item.type === 'ellipsis'" class="page-link">...</span>
    </li>
    <li class="page-item" ng-class="{'disabled' : currentGenrePage >= totalPages}"> 
      <a class="page-link" href="{{postsGenreLink.nextLink}}">{{postsGenreLink.nextLabel}}</a> 
    </li> 
  </ul> 
</nav>

关键逻辑说明 #

1. 可视范围调整：通过修改visibleRange变量，可以控制前后显示的页数（比如设为1就只显示当前页前后1页）。
2. 边界处理：
   • 当当前页靠近第一页时，自动调整起始页码，避免出现负数页码
   • 当当前页靠近最后一页时，自动调整结束页码，避免超过总页数
3. 省略号显示规则：
   • 只有当第一页和起始页之间有间隔时，才显示前面的省略号
   • 只有当结束页和最后一页之间有间隔时，才显示后面的省略号
4. 样式控制：省略号会添加disabled类，不可点击；当前页码会添加active类高亮。

这样修改后，当总页数是200-300页时，分页栏只会显示当前页前后2页，加上第一页、最后一页和必要的省略号，不会再渲染几百个页码啦！

内容的提问来源于stack exchange，提问作者LucaP