Angular4.0分页组件

自己分装的分页组件，可供学习使用

paging分页组件

分页组件的实现原理

1、由父组件传入数据总量

2、分页组件返回当前显示页面，每页显示数量

3、父组件根据分页组件返回的两个值，控制数据的分页显示

下面是实现的过程，实现原理自己分析代码，有注释

首先，在你的项目中封装分页组件paging

分页组件的代码如下：

paging.component.html

<div class="box-footer clearfix" style="width: 100%">
<ul id="paging" >
<li><a (click)="previous()">«</a></li>
<ul *ngFor="let pag of pags" id="pags">
<li><a (click)="gitPag(pag)" [class.active]="pag == pagCurren">{{pag}}</a></li>
</ul>
<li><a (click)="next()">»</a></li>
<select [(ngModel)]="pagNum" (click)="gitPagNum()">
<option>5</option>
<option>10</option>
<option>20</option>
</select>
</ul>
</div>

paging.component.ts中代码

import {Component, DoCheck, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges} from '@angular/core';

@Component({
selector: 'app-paging',
templateUrl: './paging.component.html',
styleUrls: ['./paging.component.css']
})
export class PagingComponent implements OnInit,OnChanges,DoCheck{
@Input()
private leng:number;    //数据总数量
@Output()
currentPag:EventEmitter<number> = new EventEmitter();
@Output()
pagNums:EventEmitter<number> = new EventEmitter();
private pagNum:number = 5;    //每页显示数据数量
private numPag:number;    //共有几页
private pags:Array<number>;   //用于存放全部页码的数组
private pagCurren:number = 1;     //当前页码
private oldPagNum:number = 5;

constructor() { }

//默认当前显示页是1，每页显示数量5
ngOnInit() {
this.currentPag.emit(this.pagCurren);
this.pagNums.emit(this.pagNum);
}

//当输入分页组件的数据数量发生变化，重新改变页码
ngOnChanges(changes: SimpleChanges): void {
this.pags = [];     //这里必须初始化pags数组
this.numPag = (+this.leng)%(+this.pagNum) == 0?(+this.leng)/(+this.pagNum):Math.floor((+this.leng)/(+this.pagNum))+1;
for(let i=1;i<=this.numPag;i++){
this.pags.push(i);
}
}

ngDoCheck(): void {
if(this.pagNum != this.oldPagNum){
this.pagCurren = 1;
this.currentPag.emit(this.pagCurren);
this.pagNums.emit(this.pagNum);
this.oldPagNum = this.pagNum;
}
}

//获取每页显示数量函数
gitPagNum(){
this.pags = [];     //这里必须初始化pags数组
this.numPag = (+this.leng)%(+this.pagNum) == 0?(+this.leng)/(+this.pagNum):Math.floor((+this.leng)/(+this.pagNum))+1;
for(let i=1;i<=this.numPag;i++){
this.pags.push(i);
}
}

//获取当前显示页函数
gitPag(pag){
this.pagCurren = pag;
this.currentPag.emit(this.pagCurren);
this.pagNums.emit(this.pagNum);
}

//显示下一页函数
next(){
if(this.pagCurren != this.pags[this.pags.length-1]){
this.pagCurren = this.pagCurren + 1;
}else {
this.pagCurren = this.pags[this.pags.length-1];
}
this.currentPag.emit(this.pagCurren);
this.pagNums.emit(this.pagNum);
}

//显示上一页函数
previous(){
if(this.pagCurren != 1){
this.pagCurren = this.pagCurren - 1;
}else {
this.pagCurren = 1;
}
this.currentPag.emit(this.pagCurren);
this.pagNums.emit(this.pagNum);
}
}

paging.component.css中代码

#pags li,
#paging li{
float: left;
display: inline-block;
border: 1px solid #DDDDDD;
cursor: pointer;
padding: 4px 0px;
}
#paging li a,
#pags li a{
padding: 4px 13px;
}
#paging{
}
select{
height: 30px;
border: 1px solid #DDDDDD;
cursor:pointer;
}
.active{
background-color: #EEEEEE;
}

注释：以上代码你可以完全copy，下面代码，在你的父组件中插入

父组件中数据分页的实现原理：

上面通过分页组件，我们只是拿到当前显示的页面和每页显示数据这两个变量（例：当前显示页面1，每页显示数据量5），然后需要在父组件中通过这两个变量去控制数据的显示

第二步，将分页组件插入你要使用分页功能的组件中，下面简称父组件

<app-paging [leng]="leng" (currentPag)="currentPagHandel($event)" (pagNums)="pagNumsHandel($event)"></app-paging>

父组件ts代码

public suppliersFilter:supplier[];  //suppliersFilter是我要分页的全部数据，这里你需要替换成你的数据
public dataShow :supplier[];    //这里我们再定义一个和上面数据类型相同的变量，这个变量是用来存放你在父组件模板中实际显示的数据
public leng:number;                 //数据总量，需要传给子组件的变量
public currentPag:number;           //保存从子组件中传来的当前显示页面
public pagNums:number;              //保存从子组件中传来的每页显示数量
public oldCurrentPag:number;
public oldPagNums:number;

ngOnInit() {
this.leng = this.suppliersFilter.length;
}

//这个生命周期钩子需要在你的类中实现，实现方法    export class （类名） implements DoCheck
ngDoCheck(): void {
if(this.currentPag != this.oldCurrentPag || this.pagNums != this.oldPagNums){
this.dataShow = [];
let cunrren = this.currentPag-1;
let pagNum = this.pagNums;
let startNum = cunrren*pagNum;
for(var i = 0;i<pagNum;i++,startNum++){
if(this.suppliersFilter[startNum] == null) break;
this.dataShow.push(this.suppliersFilter[startNum]);
}
this.oldCurrentPag = this.currentPag;
this.oldPagNums = this.pagNums;
}
}
//捕获当前显示页码函数
currentPagHandel(pag:number){
this.currentPag = pag;
}
//捕获每页显示数量行数
pagNumsHandel(pagNum:number){
this.pagNums = pagNum;
}

将上面代码插入到你的父组件中，你需要改动的地方是将我的分页数据suppliersFilter改成你的分页数据，然后绑定到父组件模板中的不再是全部的数据，而是分页后的数据dataShow