减少分页数

Question

我已经使用Materialize CSS和AngularJS构建了分页。参见下图。

我有一个控制器文件，其中包含一个对象数组，基于该对象可以确定页数。

Controller.js

app.controller("products", ["$scope", function($scope) {
    $scope.products = [{foo: 'bar'},{},{}..{}];
    $scope.currentPage = 0;
    $scope.pageSize = 10; // number of products to show on a page
    $scope.numberOfPages = Math.ceil($scope.prods.length/$scope.pageSize);
    $scope.pages = function(number) {
        return new Array(number);
    }
    $scope.setCurrentPage = function(index) {
        $scope.currentPage = index;
    }
}]);

HTML：

<ul class="pagination">
    <li ng-repeat="x in pages(numberOfPages) track by $index" ng-click="setCurrentPage($index)" ng-class="{ 'active': $index === currentPage }"><a href="#!">{{$index+1}}</a></li>
</ul>

现在，我希望分页像图像中显示的那样。第一个和最后一个页码始终保持可见，但是所选页码及其相邻页码仅可见。例如，对于2-> 1,2,3，对于7-> 6,7,8，依此类推。

请帮助。

Answer 1

我在下面提供了一个有效的代码段，但我将首先重点介绍它的重要方面。

通常的想法是使用ng-show来显示或隐藏分页小部件中的每个页面链接按钮部分。这样做的逻辑基于：链接表示的页面，当前页面和页面链接窗口的大小（在您的情况下，它仅仅是一个）。

唯一棘手的部分是您需要的这些椭圆。我的建议是将它们实现为伪元素。这些伪元素是根据CSS类的应用显示或隐藏的，这些CSS类只能应用于分页小部件的首页或末页链接项。

该示例是准系统，并去除与获取所需分页行为无关的所有内容。

angular
  .module('app', [])
  .controller('products', function ($scope) {
    $scope.currentPage = 0;
    $scope.pageCount = 100;
    $scope.pageLinkWindowSize = 1;
    $scope.pages = function (pageCount) {
      return new Array(pageCount);
    };
    $scope.setCurrentPage = function (index) {
      $scope.currentPage = index;
    };
    $scope.isPageLinkVisible = function (index) {
      if (index === 0 || index === $scope.pageCount - 1) {
        return true;
      } else {
        return index >= Math.max($scope.currentPage > $scope.pageCount - 1 - $scope.pageLinkWindowSize ? $scope.pageCount - 1 - $scope.pageLinkWindowSize * 2 : $scope.currentPage - $scope.pageLinkWindowSize, 0) &&
               index <= Math.min($scope.currentPage < $scope.pageLinkWindowSize ? $scope.pageLinkWindowSize * 2 : $scope.currentPage + $scope.pageLinkWindowSize, $scope.pageCount - 1);
      }
    };
    $scope.hasPagesAfter = function (index) {
      return index === 0 && ($scope.currentPage - $scope.pageLinkWindowSize) > 1;
    };
    $scope.hasPagesBefore = function (index) {
      return index === ($scope.pageCount - 1) && ($scope.pageCount - 1) - $scope.currentPage - $scope.pageLinkWindowSize > 1;
    };
  });

ul {
  list-style-type: none;
}
li {
  float: left;
  margin-right: 1em;
}
.pages-after::after {
  content: '...';
  display: inline;
  margin-left: 1em;
}
.pages-before::before {
  content: '...';
  display: inline;
  margin-right: 1em;
}

<div ng-app="app" ng-controller="products">
  <div>
    <label>
      Window Size
      <input type="number" ng-model="pageLinkWindowSize" min="1" />
    </label>
  </div>
  <ul>
    <li
      ng-repeat="page in pages(pageCount) track by $index"
      ng-click="setCurrentPage($index)"
      ng-show="isPageLinkVisible($index)"
      ng-class="{
        'pages-after': hasPagesAfter($index),
        'pages-before': hasPagesBefore($index),
      }">
      <a href="#!">{{ $index + 1 }}</a>
    </li>
  </ul>
</div>
<script src="https://unpkg.com/angular@1.7.4/angular.min.js"></script>