Home > Developer > Web Develop
Original address: http://www.cnblogs.com/pilixiami/p/5634405.html
There are two pagination controls in Ui-bootstrap, one is lightweight pager, the functionality of the previous page and the next page, the other is a full-featured pagination, and in addition to the previous and next pages, you can select the first page and the last page, and support the display of multiple pages.
This is an example of pager:
<!DOCTYPE HTML><HTMLNg-app= "Ui.bootstrap.demo"xmlns= "http://www.w3.org/1999/xhtml"><Head> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /> <Linkhref= "/content/bootstrap.css"rel= "stylesheet" /> <title></title> <Scriptsrc= "/scripts/angular.js"></Script> <Scriptsrc= "/scripts/ui-bootstrap-tpls-1.3.2.js"></Script> <Script>Angular.module ('Ui.bootstrap.demo', ['Ui.bootstrap']). Controller ('Pagerdemoctrl', function($scope) {$scope. TotalItems= -; $scope. CurrentPage= 4; }); </Script></Head><Body> <DivNg-controller= "Pagerdemoctrl"> <h4>Pager</h4> <Uib-pagerTotal-items= "TotalItems"Ng-model= "CurrentPage"Next-text= "Next Page"Previous-text= "Previous page"num-pages= "Totalpage"></Uib-pager> <Pre>Current page: {{currentpage}}, Total pages: {{totalpage}}</Pre> </Div></Body></HTML>
The effect is:
The properties that can be used in pager are:
| Property name | Default value | Note |
| Align | True | Whether the buttons on the previous page and the next page are aligned on both sides |
| Items-per-page | 10 | The quantity displayed per page. Setting a value of less than 1 indicates that all items are displayed |
| Next-text | Next? | button name on next page |
| Ng-disabled | False | Whether to disable |
| Ng-model | Current page | |
| Num-pages | Angular.noop | Read-only property, representing the total number of pages |
| Previous-text | ? Previous | The name of the button on the previous page |
| Template-url | Uib/template/pager/pager.html | |
| Total-items | How many data are there in total? |
In the pager control, Num-pages is a read-only property, and the total number of pages is calculated by the control based on Total-items and Items-per-page.
This is an example of pagination:
<!DOCTYPE HTML><HTMLNg-app= "Ui.bootstrap.demo"xmlns= "http://www.w3.org/1999/xhtml"><Head> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /> <Linkhref= "/content/bootstrap.css"rel= "stylesheet" /> <title></title> <Scriptsrc= "/scripts/angular.js"></Script> <Scriptsrc= "/scripts/ui-bootstrap-tpls-1.3.2.js"></Script> <Script>Angular.module ('Ui.bootstrap.demo', ['Ui.bootstrap']). Controller ('Paginationdemoctrl', function($scope) {$scope. maxSize= 5; $scope. TotalItems= 175; $scope. CurrentPage= 1; }); </Script></Head><Body> <DivNg-controller= "Paginationdemoctrl"> <uib-paginationTotal-items= "TotalItems"Ng-model= "CurrentPage"max-size= "MaxSize"First-text= "First page"Previous-text= "Previous page"Next-text= "Next Page"Last-text= "Last Page"boundary-links= "true"boundary-link-numbers= "true"></uib-pagination> </Div></Body></HTML>
The effect is:
The properties that can be used in pagination are:
| Property name | Default value | Note |
| Boundary-links | False | Whether to show buttons for the first and last pages |
| Boundary-link-numbers | False | Whether to show the number of pages on the first and last pages, and when the number of pages is too large ... Represents the number of pages that are hidden |
| Direction-links | True | Whether to display buttons for the previous and next pages |
| First-text | First | First page of the button's name |
| Last-text | Last | The last page of the button name |
| Previous-text | Previous | Name of the button on the previous page |
| Next-text | Next | button name on next page |
| Force-ellipses | False | Whether the rotate is set to true and the number of pages is too large to display as "..." |
| Rotate | True | Whether to keep the current in the middle of the visible range |
| Items-per-page | 10 | The quantity displayed per page. Setting a value of less than 1 indicates that all items are displayed |
| Max-size | Null | Selectable number of pages (if set to 5, the current page is 10, the total number of pages is 100, then you can select Page 8,9,10,11,12) |
| Ng-change | Functions that are called when the number of pages changes | |
| Ng-disabled | False | Whether to disable |
| Ng-model | Current page | |
| Num-pages | Angular.noop | Read-only property, representing the total number of pages |
| Page-label | Angular.identity | expressions that set page labels |
| Template-url | Uib/template/pagination/pagination.html | |
| Total-items | How many data are there in total? |
Boundary-link-numbers,rotate and force-ellipses are used to control how page buttons are displayed and can be combined.
Page-label is a useful property that can set an expression to change the text of the page buttons, such as the Page-label= "' P ' + $page" effect:
Angularjs UI Components Ui-bootstrap Share (v)--pager and pagination
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
