Angularjs UI Components Ui-bootstrap Share (v)--pager and pagination

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.