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()">&laquo;</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()">&raquo;</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，每页显示数量5ngOnInit() {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

Angular4.0分页组件相关推荐

vue3.0分页组件
<template><div class="xtx-pagination"><a href="javascript:;" @cli ...
ASP.Net分页组件1.0开发下载了...
ASP.Net分页组件1.0开发下载了...支持皮肤和自定义样式.热乎乎的,写的不好的地方指正出来啊... 开源免费的.希望大家多多支持... ASP.Net分页组件1.0开发下载了...支持皮肤和自 ...
vue2.0实现分页组件
http://www.php361.com/index.php?c=index&a=view&id=4671 http://www.yanglajiao.com/article/sin ...
mvc jquery ajax分页实例,jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解，mvcpagerajax分页...
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解,mvcpagerajax分页简单的两个步骤即可实现分页功能 //回调里面进行业务处理 function lo ...
Angular4.0从入门到实战打造在线竞拍网站学习笔记之四--数据绑定管道
Angular4.0基础知识之组件 Angular4.0基础知识之路由 Angular4.0依赖注入 Angular4.0数据绑定&管道数据绑定数据绑定允许你将组件控制器的属性和方法与组件 ...
使用 java 的 displaytag1.2 分页组件使用步骤
今天我的小博客项目写完了,心情挺好,发表篇 java web开发的分页组件使用技巧吧,在这里面, 我不想啰嗦,直接我把我的使用方式写了出来,希望给我们为 java 分页节省更多的时间做更 ...
Python分页组件
分页组件的实现: class Pagination(object):"""自定义分页"""def __init__(self,current ...
与服务器交互的分页组件PageComponent
2019独角兽企业重金招聘Python工程师标准>>> Ext.define('tools.PageComponent', {extend : 'Ext.Container',req ...
基于jquery的php分页,基于jQuery封装的分页组件
前言: 由于项目需要实现分页效果,上jQuery插件库找了下,但是木有找到自己想要的效果,于是自己封装了个分页组件. 思路: 主要是初始化时基于原型建立的分页模板然后绑定动态事件并实现刷新DOM的分页 ...

Angular4.0分页组件

Angular4.0分页组件相关推荐

最新文章

热门文章