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>5option>
      <option>10option>
      <option>20option>
    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 = new EventEmitter();
  @Output()
  pagNums:EventEmitter = new EventEmitter();
  private pagNum:number = 5;    //每页显示数据数量
  private numPag:number;    //共有几页
  private pags:Array;   //用于存放全部页码的数组
  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），然后需要在父组件中通过这两个变量去控制数据的显示

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

"leng" (currentPag)="currentPagHandel($event)" (pagNums)="pagNumsHandel($event)">

父组件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;iif(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