This repository is for demonstration purposes of how it can be implemented in Angular and is not maintaned. Please fork and maintain your own version of this repository.
Simple pagination bar control for your angular2 applications using bootstrap3. Does not depend of jquery. If you don't want to use it without bootstrap - simply create proper css classes. Please star a project if you liked it, or create an issue if you have problems with it.
-
Install npm module:
npm install ngx-paginator --save -
If you are using system.js you may want to add this into
mapandpackageconfig:{ "map": { "ngx-paginator": "node_modules/ngx-paginator" }, "packages": { "ngx-paginator": { "main": "index.js", "defaultExtension": "js" } } }
Import PaginatorModule in your app. There are two components you can use in your components.
First is a paginator is a simple control that shows pages and emits events when page is being chagned:
<paginator [total]="50" [onPage]="5" [currentPage]="1" [maxVisible]="5" (onChange)="someActionOnPageChange()" [directionLinks]="true" directionNextLabel="Next" directionPreviousLabel="Prev" [boundaryLinks]="true" boundaryFirstLabel="First" boundaryLastLabel="Last" [hideOnSinglePage]="true"> </paginator>total- a total number of items of the content you showonPage- number of items of content you show per pagecurrentPage- currently selected pagemaxVisible- maximum number of pages visible for selection (to prevent pages overflow)(onChange)- event emitted when user changes the pagedirectionLinks- Shows direction (prev/next) buttons. Default is true.directionNextLabel- Label for the next direction button. Default is ».directionPreviousLabel- Label for the previous direction button. Default is «.boundaryLinks- Shows boundary (first/last) buttons. Default is false.boundaryFirstLabel- Label for the first boundary button. Default is First.boundaryLastLabel- Label for the last boundary button. Default is Last.hideOnSinglePage- hides the whole paginator if there is only one page. Default is true.
Second is a router-paginator that shows pages and re-navigates using router parameters when page is being chagned.
<router-paginator param="page" queryParam="page" [total]="50" [onPage]="5" [currentPage]="1" [maxVisible]="5" (onChange)="someActionOnPageChange()" [directionLinks]="true" directionNextLabel="Next" directionPreviousLabel="Prev" [boundaryLinks]="true" boundaryFirstLabel="First" boundaryLastLabel="Last" [hideOnSinglePage]="true"> </router-paginator>param- router parameter name to be used to store page. Either this, eitherqueryParammust be set.queryParam- router parameter name to be used to store page. Either this, eitherparammust be set.total- a total number of items of the content you showonPage- number of items of content you show per pagecurrentPage- currently selected pagemaxVisible- maximum number of pages visible for selection (to prevent pages overflow)(onChange)- event emitted when user changes the pagedirectionLinks- Shows direction (prev/next) buttons. Default is true.directionNextLabel- Label for the next direction button. Default is ».directionPreviousLabel- Label for the previous direction button. Default is «.boundaryLinks- Shows boundary (first/last) buttons. Default is false.boundaryFirstLabel- Label for the first boundary button. Default is First.boundaryLastLabel- Label for the last boundary button. Default is Last.hideOnSinglePage- hides the whole paginator if there is only one page. Default is true.
Using simple paginator:
import {Component} from "@angular/core"; import {PaginatorModule} from "ngx-paginator"; @Component({ selector: "app", template: ` <div class="container"> <!-- default paginator --> <paginator [onPage]="5" [total]="100" [maxVisible]="5"></paginator> <!-- simple paginator without any additional controls --> <paginator [directionLinks]="false" [boundaryLinks]="false" [onPage]="5" [total]="100" [maxVisible]="5"></paginator> <!-- paginator with next/prev custom labels --> <paginator [directionLinks]="true" directionNextLabel="next >>" directionPreviousLabel="<< prev" [onPage]="5" [total]="100" [maxVisible]="5"></paginator> <!-- paginator with boundary buttons --> <paginator [boundaryLinks]="true" [onPage]="5" [total]="100" [maxVisible]="5"></paginator> <!-- paginator with boundary custom labels --> <paginator [boundaryLinks]="true" boundaryFirstLabel=":first" boundaryLastLabel="last:" [onPage]="5" [total]="100" [maxVisible]="5"></paginator> <!-- paginator that is hidden if there are zero pages --> <paginator [hideOnSinglePage]="true" [onPage]="5" [total]="5" [maxVisible]="5"></paginator> <!-- paginator that is NOT hidden if there are zero pages --> <paginator [hideOnSinglePage]="false" [onPage]="5" [total]="5" [maxVisible]="5"></paginator> </div> ` }) export class App { } @NgModule({ imports: [ // ... PaginatorModule ], declarations: [ App ], bootstrap: [ App ] }) export class AppModule { }Using route paginator:
@Component({ selector: "sample2-component", template: ` <!-- PARAM PAGINATOR--> <!-- default paginator --> <route-paginator param="page" [onPage]="5" [total]="100" [maxVisible]="5"></route-paginator> <!-- simple paginator without any additional controls --> <route-paginator param="page" [directionLinks]="false" [boundaryLinks]="false" [onPage]="5" [total]="100" [maxVisible]="5"></route-paginator> <!-- paginator with next/prev custom labels --> <route-paginator param="page" [directionLinks]="true" directionNextLabel="next >>" directionPreviousLabel="<< prev" [onPage]="5" [total]="100" [maxVisible]="5"></route-paginator> <!-- paginator with boundary buttons --> <route-paginator param="page" [boundaryLinks]="true" [onPage]="5" [total]="100" [maxVisible]="5"></route-paginator> <!-- paginator with boundary custom labels --> <route-paginator param="page" [boundaryLinks]="true" boundaryFirstLabel=":first" boundaryLastLabel="last:" [onPage]="5" [total]="100" [maxVisible]="5"></route-paginator> <!-- paginator that is hidden if there are zero pages --> <route-paginator param="page" [hideOnSinglePage]="true" [onPage]="5" [total]="5" [maxVisible]="5"></route-paginator> <!-- paginator that is NOT hidden if there are zero pages --> <route-paginator param="page" [hideOnSinglePage]="false" [onPage]="5" [total]="5" [maxVisible]="5"></route-paginator> <!-- QUERY PARAM PAGINATOR--> <!-- default paginator --> <route-paginator queryParam="page" [onPage]="5" [total]="100" [maxVisible]="5"></route-paginator> <!-- simple paginator without any additional controls --> <route-paginator queryParam="page" [directionLinks]="false" [boundaryLinks]="false" [onPage]="5" [total]="100" [maxVisible]="5"></route-paginator> <!-- paginator with next/prev custom labels --> <route-paginator queryParam="page" [directionLinks]="true" directionNextLabel="next >>" directionPreviousLabel="<< prev" [onPage]="5" [total]="100" [maxVisible]="5"></route-paginator> <!-- paginator with boundary buttons --> <route-paginator queryParam="page" [boundaryLinks]="true" [onPage]="5" [total]="100" [maxVisible]="5"></route-paginator> <!-- paginator with boundary custom labels --> <route-paginator queryParam="page" [boundaryLinks]="true" boundaryFirstLabel=":first" boundaryLastLabel="last:" [onPage]="5" [total]="100" [maxVisible]="5"></route-paginator> <!-- paginator that is hidden if there are zero pages --> <route-paginator queryParam="page" [hideOnSinglePage]="true" [onPage]="5" [total]="5" [maxVisible]="5"></route-paginator> <!-- paginator that is NOT hidden if there are zero pages --> <route-paginator queryParam="page" [hideOnSinglePage]="false" [onPage]="5" [total]="5" [maxVisible]="5"></route-paginator> ` }) export class Sample2Component { } @NgModule({ imports: [ // ... PaginatorModule ], declarations: [ App ], bootstrap: [ App ] }) export class AppModule { }Take a look on samples in ./sample for more examples of usages.
0.0.9
- upgrade to angular rc.6
0.0.8
router-paginatorhas been renamed toroute-paginatorroute-paginatornow should have implicitly setparamNameorqueryParamName
0.0.9
paramNamechanged its name toparamqueryParamNamechanged its name toqueryParam