pager

本文翻译自：https://angular-ui.github.io/bootstrap/

目录：

1. pager

2. pagination

 

一、Pager    

 参数设置：

1) align: 默认为true，是否将每个链接与边框对齐

2) items-per-page: 默认10, 每页最多呈现的项目数

3) next-text: 默认next>>, next button上的文字说明

4) ng-disabled: 默认false，禁用pager组件

5) ng-model: 现在的页号,第一页是1

6) num-pages: 默认angular.noop，可选表达式，指定要显示的页面总数

7) previous-text: 默认<<previous， previous button上的文字说明

8) template-url: 默认uib/template/pager/pager.html

9) total-items: 所有页面的项目总数

<div ng-controller="PagerDemoCtrl">
  <h4>Pager</h4>
  <pre>You are currently on page {{currentPage}}</pre>
  <uib-pager total-items="totalItems" ng-model="currentPage"></uib-pager>
</div>

angular.module('ui.bootstrap.demo').controller('PagerDemoCtrl', function($scope) {
  $scope.totalItems = 64;// 一共64个项目，每页默认放10个项目，则需要7页，因此点击next到7就不能点击了
  $scope.currentPage = 4;
});

 

 

二、Pagination       回到pager

 

 

 

 

 uib-pagination 参数设置：

1) boundary-links: 默认false，是否显示 first/last 按钮，true显示

2) boundary-link-numbers: 默认false, 是否总是显示第一页和最后一页的页号，如果max-size比总页数小，那么第一页和最后一页的数字显示，并且中间用省略号代替。注意：max-size指的是范围中点。

3) direction-links: 默认true，是否显示previous/next按钮

4) first-text: 默认First, first按钮上的文字显示

5) force-ellipses: 默认false,当rotate设置为true，max-size小于总的页数时显示省略号

6) items-per-page: 默认10,

7) last-text: 默认Last，last按钮上的文字显示

8) max-size: 默认null，分页数量限制

9) next-text: 默认next, next按钮上的文字显示

10) ng-change: 当页码改变时触发函数

11) ng-disabled: 默认false, 用于禁用pagination组件

12) ng-model: 当前页码

13) num-pages: 默认angular.noop,所有页码数量

14) page-label: 默认angular.identity

15) previous-text: 默认previous, previous按钮上的文字显示

16) rotate: 默认true, 是否保持当前页在可视区中间

17) template-url: uib/template/pagination/pagination.html

18) total-items: 所有页面的页号

 程序演示见原网站

<div ng-controller="PaginationDemoCtrl">
    <h4>Default</h4>
    <uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()"></uib-pagination>
    <uib-pagination boundary-links="true" total-items="totalItems" ng-model="currentPage" class="pagination-sm" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></uib-pagination>
    <uib-pagination direction-links="false" boundary-links="true" total-items="totalItems" ng-model="currentPage"></uib-pagination>
    <uib-pagination direction-links="false" total-items="totalItems" ng-model="currentPage" num-pages="smallnumPages"></uib-pagination>
    <pre>The selected page no: {{currentPage}}</pre>
    <button type="button" class="btn btn-info" ng-click="setPage(3)">Set current page to: 3</button>

    <hr />
    <h4>Limit the maximum visible buttons</h4>
    <h6><code>rotate</code> defaulted to <code>true</code>:</h6>
    <uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" num-pages="numPages"></uib-pagination>
    <h6><code>rotate</code> defaulted to <code>true</code> and <code>force-ellipses</code> set to <code>true</code>:</h6>
    <uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" force-ellipses="true"></uib-pagination>
    <h6><code>rotate</code> set to <code>false</code>:</h6>
    <uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false"></uib-pagination>
    <h6><code>boundary-link-numbers</code> set to <code>true</code> and <code>rotate</code> defaulted to <code>true</code>:</h6>
    <uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-link-numbers="true"></uib-pagination>
    <h6><code>boundary-link-numbers</code> set to <code>true</code> and <code>rotate</code> set to <code>false</code>:</h6>
    <uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-link-numbers="true" rotate="false"></uib-pagination>
    <pre>Page: {{bigCurrentPage}} / {{numPages}}</pre>

</div>

angular.module('ui.bootstrap.demo').controller('PaginationDemoCtrl', function ($scope, $log) {
  $scope.totalItems = 64;
  $scope.currentPage = 4;

  $scope.setPage = function (pageNo) {
    $scope.currentPage = pageNo;
  };

  $scope.pageChanged = function() {
    $log.log('Page changed to: ' + $scope.currentPage);
  };

  $scope.maxSize = 5;
  $scope.bigTotalItems = 175;
  $scope.bigCurrentPage = 1;
});