laixiangran/e-ngx-pagination

基于Angular的分页组件

e-ngx-pagination

基于Angular的分页组件。

Usage

1. Install

   npm install --save e-ngx-pagination@latest

2. Set in the .angular-cli.json（@angular/cli）

   "styles": [
       "../node_modules/bootstrap/dist/css/bootstrap.min.css"
   ]

3. Add the ENgxPaginationModule

   import {ENgxPaginationModule} from "e-ngx-pagination";
   @NgModule({
       imports: [
           ENgxPaginationModule
       ]
   })

4. Use in the template

   <h2>复杂分页</h2>
   <e-ngx-pagination [totalItems]="totalItems"
                           [(ngModel)]="currentPage"
                           [maxSize]="maxSize"
                           [itemsPerPage]="itemsPerPage"
                           class="pagination-lg"
                           [boundaryLinks]="true"
                           [rotate]="false"
                           previousText="上一页"
                           nextText="下一页"
                           firstText="首页"
                           lastText="尾页"
                           (pageChanged)="pageChanged($event)">
   </e-ngx-pagination>
   
   <h2>简单分页</h2>
   <e-ngx-pager 	[totalItems]="totalItems"
                         [(ngModel)]="currentPage"
                         [itemsPerPage]="itemsPerPage"
                         class="pagination-lg"
                         previousText="上一页"
                         nextText="下一页"
                         (pageChanged)="pageChanged($event)">
   </e-ngx-pager>

5. Use in the component

   maxSize: number = 5;
   currentPage: number = 1;
   itemsPerPage: number = 20; // 每页条数
   totalItems: number = 200; // 总数
   
   pageChanged (event: any): void {
   	console.log(event);
   };

API

Inputs

Pagination

• rotate (?boolean=true) - 如果为 true 则当前页始终在分页列表的中间
• disabled (?boolean=false) - 如果为 true 则分页组件将被禁用
• totalItems (number) - 总项目数
• itemsPerPage (?number=10) - 每页的项目数， 如果小于1将在一页显示所有的项目数
• maxSize (?number=5) - 最大显示的分页链接数
• boundaryLinks (?boolean=true) - 如果为 false 则首页和末页的按钮将隐藏
• directionLinks (?boolean=true) - 如果为 false 则上一页和下一页的按钮将隐藏
• previousText (?string='上一页') - 上一页按钮显示的文本
• nextText (?string='下一页') - 下一页按钮显示的文本
• firstText (?string='首页') - 首页按钮显示的文本
• lastText (?string='末页') - 末页按钮显示的文本

Pager

• align (?boolean=true) - 如果为 true 则在页面的边上显示分页链接
• disabled (?boolean=false) - 如果为 true 则分页组件将被禁用
• totalItems (number) - 总项目数
• itemsPerPage (?number=10) - 每页的项目数， 如果小于1将在一页显示所有的项目数
• previousText (?string='上一页') - 上一页按钮显示的文本
• nextText (?string='下一页') - 下一页按钮显示的文本

Outputs

Pagination

• numPages - 总页数改变时触发, $event:number 等于总页数
• pageChanged - 当前页改变时触发, $event:{page, itemsPerPage} 等于对象包括当前页（page）和每页项目数（itemsPerPage）

Pager

• numPages - 总页数改变时触发, $event:number 等于总页数
• pageChanged - 当前页改变时触发, $event:{page, itemsPerPage} 等于对象包括当前页（page）和每页项目数（itemsPerPage）

Develop

```shell
npm install // 安装依赖包

npm start // 启动项目
```

License

e-ngx-pagination's Issues

Template prase error

Hi,

I followed the installation method and getting following error on console.

zone.js:355 Unhandled Promise rejection: Template parse errors:
Can't bind to 'totalItems' since it isn't a known property of 'essence-ng2-pagination'.

1. If 'essence-ng2-pagination' is an Angular component and it has 'totalItems' input, then verify that it is part of this module.
2. If 'essence-ng2-pagination' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.

Can't bind to 'itemsPerPage' since it isn't a known property of 'essence-ng2-pager'.

1. If 'essence-ng2-pager' is an Angular component and it has 'itemsPerPage' input, then verify that it is part of this module.
2. If 'essence-ng2-pager' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.

This is my component file.

`import {Component, NgModule} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {Http} from '@angular/http';
import {MakeCall} from './make-call';
import {ExponentialStrengthPipe} from './QuizScoresPipe';
import { EssenceNg2PaginationModule } from "essence-ng2-pagination";

@component({
selector: 'left_content_section',
templateUrl: '../angtemplates/quizscores.html',
providers:[MakeCall],
})

@NgModule ({
declarations: [
ExponentialStrengthPipe
],
imports: [
EssenceNg2PaginationModule
]
})
// Component class
export class QuizScores {
targeturl = '';
public nodata = 1;
public resultset :any ;
public quizscores:any ;

public maxSize: number = 5;
public currentPage: number = 1;
public itemsPerPage: number = 20;
public totalItems: number = 200;

constructor(  public http: Http
            ,   public api: MakeCall
            ,	route: ActivatedRoute){
	this.loadView();
}

public pageChanged (event: any): void {
    console.log(event);
};

public loadView() {
this.targeturl = "/getquizscores";
this.api.getService(this.targeturl)
.then(data => {
this.resultset = data;
if(this.resultset.status == 0){
this.nodata =0;
}else{
this.quizscores = this.resultset;
}
},
error => {
console.log('Network error');
});
}
}
`

this is my module.ts

`///
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { PathLocationStrategy, LocationStrategy, HashLocationStrategy } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { routing } from './app.routes';
import { MyProfile } from './MyProfile';
import { MyCourses } from './MyCourses';
import { QuizScores } from './QuizScores';
import { ExponentialStrengthPipe } from './QuizScoresPipe';
import { CourseDetails } from './CourseDetails';
import { QuizDetails } from './QuizDetails';
import { VideoLesson } from './VideoLesson';
import { PptLesson } from './PptLesson';
import { HomeComponent } from './HomeComponent';
import { SideBarComponent } from './SideBarComponent';
import { CommentComponent } from './CommentComponent';
import { EssenceNg2PaginationModule } from "essence-ng2-pagination";

@NgModule({
declarations: [
AppComponent,
HomeComponent,
SideBarComponent,
MyProfile,
MyCourses,
QuizScores,
ExponentialStrengthPipe,
CourseDetails,
QuizDetails,
VideoLesson,
PptLesson,
CommentComponent,
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
routing,
EssenceNg2PaginationModule
],
providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],
bootstrap: [AppComponent]
})
export class AppModule { }

/*import {bootstrap} from '@angular/platform-browser-dynamic';
import {provide} from '@angular/core';
import {AppComponent} from './app.component';
import {HTTP_PROVIDERS} from '@angular/http';
import { Http, Response } from '@angular/http';
import 'rxjs/Rx';
import {
LocationStrategy,
HashLocationStrategy,
}
from '@angular/common';
import {ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from '@angular/router';
bootstrap(AppComponent, [
ROUTER_PROVIDERS,
ROUTER_DIRECTIVES,
HTTP_PROVIDERS,
provide(LocationStrategy, {useClass: HashLocationStrategy})
]);
*/
`

this is what I added on template

` <essence-ng2-pagination [totalItems]="totalItems"
[(ngModel)]="currentPage"
[maxSize]="maxSize"
[itemsPerPage]="itemsPerPage"
class="pagination-lg"
[boundaryLinks]="true"
[rotate]="false"
previousText="上一页"
nextText="下一页"
firstText="首页"
lastText="尾页"
(pageChanged)="pageChanged($event)">

        <essence-ng2-pager 	[totalItems]="totalItems"
                              [(ngModel)]="currentPage"
                              [itemsPerPage]="itemsPerPage"
                              class="pagination-lg"
                              previousText="上一页"
                              nextText="下一页"
                              (pageChanged)="pageChanged($event)">
        </essence-ng2-pager>`

Please help. I am very new to angularJS. Did I miss anything here ?