AngularJs的UI組件ui-Bootstrap分享（五）——Pager和Pagination

本文轉載自查看原文 2016-07-01 23:38 16257 AngularJs/ ui-bootstrap

ui-bootstrap中有兩個分頁控件，一個是輕量級的Pager，只有上一頁和下一頁的功能，另一個是功能完整的Pagination，除了上一頁和下一頁，還可以選擇首頁和最后頁，並且支持多種頁數的顯示方式。

這是Pager的例子：

 1 <!DOCTYPE html>
 2 <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <link href="/Content/bootstrap.css" rel="stylesheet" />
 6     <title></title>
 7 
 8     <script src="/Scripts/angular.js"></script>
 9     <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>
10     <script>
11  angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('PagerDemoCtrl', function ($scope) { 12  $scope.totalItems = 64; 13  $scope.currentPage = 4; 14  }); 15     </script>
16 
17 </head>
18 <body>
19     <div ng-controller="PagerDemoCtrl">
20         <h4>Pager</h4>
21         <uib-pager total-items="totalItems" ng-model="currentPage" next-text="下一頁" previous-text="上一頁" num-pages="totalPage"></uib-pager>
22         <pre>當前頁：{{currentPage}},總頁數：{{totalPage}}</pre>
23  </div>
24 </body>
25 </html>

View Code

效果為：

Pager中可以使用的屬性有：

屬性名	默認值	備注
align	true	上一頁和下一頁的按鈕是否兩邊對齊
items-per-page	10	每頁顯示的數量.設置值小於1表示顯示所有項
next-text	Next »	下一頁的按鈕名稱
ng-disabled	false	是否禁用
ng-model		當前第幾頁
num-pages	angular.noop	只讀屬性，表示總頁數
previous-text	« Previous	上一頁的按鈕名稱
template-url	uib/template/pager/pager.html
total-items		總共有多少條數據

在Pager控件中，num-pages是只讀屬性，由控件根據total-items和items-per-page計算出總頁數。

這是Pagination的例子：

 1 <!DOCTYPE html>
 2 <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <link href="/Content/bootstrap.css" rel="stylesheet" />
 6     <title></title>
 7 
 8     <script src="/Scripts/angular.js"></script>
 9     <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>
10 
11      <script>
12  angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('PaginationDemoCtrl', function ($scope) { 13  $scope.maxSize = 5; 14  $scope.totalItems = 175; 15  $scope.currentPage = 1; 16  }); 17     </script>
18 
19 </head>
20 <body>
21     <div ng-controller="PaginationDemoCtrl">
22         <uib-pagination total-items="totalItems" ng-model="currentPage" max-size="maxSize" first-text="第一頁" previous-text="上一頁" next-text="下一頁" last-text="最后頁" boundary-links="true" boundary-link-numbers="true"></uib-pagination>
23     </div>
24 </body>
25 </html>

View Code

效果為：

Pagination中可以使用的屬性有：

屬性名	默認值	備注
boundary-links	false	是否顯示第一頁和最后一頁的按鈕
boundary-link-numbers	false	是否顯示第一頁和最后一頁的頁數,並在頁數過多時用…表示被隱藏的頁數
direction-links	true	是否顯示上一頁和下一頁的按鈕
first-text	first	第一頁的按鈕的名字
last-text	last	最后一頁的按鈕名字
previous-text	Previous	上一頁的按鈕名字
next-text	Next	下一頁的按鈕名字
force-ellipses	false	是否在rotate被設置為true並且頁數過多時顯示為"…"
rotate	true	是否保持當前在可視范圍的中間
items-per-page	10	每頁顯示的數量.設置值小於1表示顯示所有項
max-size	null	可選擇的頁數范圍(如果設置為5,當前頁為10,總頁數為100,那么可選擇第8,9,10,11,12頁)
ng-change		頁數變化時調用的函數
ng-disabled	false	是否禁用
ng-model		當前頁數
num-pages	angular.noop	只讀屬性，表示總頁數
page-label	angular.identity	設置頁數標簽的表達式
template-url	uib/template/pagination/pagination.html
total-items		總共有多少條數據