[转]Angular4 自制分页控件

本文转自：https://blog.csdn.net/Junyuan_123/article/details/79486276

过年后第一波，自制的分页控件，可能功能没有 PrimeNG 那么好，但是基本可以实现自定义翻页功能，包括：首页/最后一页/上一页/下一页。

用户可以自定义：

1. 当前默认页码（如未提供，默认为第一页）

2. 最大显示几个页码（如未提供，默认为5）

3. 每页显示几条数据 （如未提供，默认为5）

例子，共10条数据

<paginator [totalRecords]="10"

[rows]="3"

[currentPage]="0"

(onPageChange)="paginate($event)">

</paginator>

<paginator [totalRecords]="10"

[rows]="1"

[currentPage]="0"

(onPageChange)="paginate($event)">

</paginator>

HTML:

<ul class="pageUi clear">

<li (click)="changePage('first')"

class="fa fa-angle-double-left"

[ngClass]="{'disable': pageValidation.isFirst}">

</li>

<li (click)="changePage('pre')"

class="fa fa-angle-left"

[ngClass]="{'disable': pageValidation.isFirst}">

</li>

<li (click)="changePage(page)"

*ngFor="let page of pageArr"

[ngClass]="{'active': page == currentPage}">{{page + 1}}

</li>

<li (click)="changePage('next')"

class="fa fa-angle-right"

[ngClass]="{'disable': pageValidation.isLast}">

</li>

<li (click)="changePage('last')"

class="fa fa-angle-double-right"

[ngClass]="{'disable': pageValidation.isLast}">

</li>

</ul>

CSS:

ul.pageUi {

display: flex;

justify-content: center;

}

ul.pageUi li {

list-style-type: none;

float: left;

display: flex;

align-items: center;

justify-content: center;

width: 50px;

height: 50px;

border: solid 1px #ececec;

border-width: 1px 1px 1px 0;

}

ul.pageUi li:first-child {

border-left-width: 1px;

border-radius: 5px 0 0 5px;

}

ul.pageUi li:last-child {

border-radius: 0 5px 5px 0;

}

ul.pageUi li:hover {

background-color: #ececec;

cursor: pointer;

}

ul.pageUi li.active {

color: blueviolet;

font-weight: bold;

}

ul.pageUi li.disable {

color: #ccc;

background-color: #efefef;

}

ul.pageUi li.disable:hover {

background-color: none;

line-height: 50px;

}

TS:

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

@Component({

selector: 'paginator',

templateUrl: './paginator.component.html',

styleUrls: ['./paginator.component.css']

})

export class PaginatorComponent implements OnInit{

@Input() totalRecords: number;

@Input() rows: number = 5;

@Input() currentPage: number;

@Input() pageLinkSize: number;

@Output() onPageChange = new EventEmitter();

private pageCount: number;

private pageArr: Array<number> = [];

private pageValidation: any = { isFirst: false, isLast: false };

constructor(){}

ngOnInit(){

this.initDefaultValue();

this.getPageCount();

this.getVisiblePageArr();

this.validateIfFirstLast();

}

initDefaultValue(){

this.rows = this.rows ? this.rows : 5;

this.pageLinkSize = this.pageLinkSize ? this.pageLinkSize : 5;

this.currentPage = this.currentPage ? this.currentPage : 0;

}

getPageCount(){

this.pageCount = Math.ceil(this.totalRecords/this.rows);

}

changePage(actionKey: string){

this.getCurrentPage(actionKey);

this.getVisiblePageArr();

let data = {

first: this.currentPage * this.rows,

rows: this.rows,

page: this.currentPage,

pageCount: this.pageCount

}

this.onPageChange.emit(data);

}

getVisiblePageArr(){

this.pageArr = [];

let visiblePage = Math.min(this.pageLinkSize, this.pageCount);

let start = Math.max(0, Math.ceil(this.currentPage - visiblePage / 2));

// When page next to the end

if(this.currentPage >= Math.floor(this.pageCount - visiblePage / 2) ) {

start = Math.max(0, this.pageCount - this.pageLinkSize);

}

let end = start + visiblePage - 1;

for (var i = start; i <= end; i++) {

this.pageArr.push(i);

}

}

getCurrentPage(actionKey: string){

if(actionKey == 'first') {

this.currentPage = 0;

} else if(actionKey == 'last'){

this.currentPage = this.pageCount - 1;

} else if(actionKey == 'pre') {

if(this.currentPage <= 0) {

return;

}

this.currentPage = this.currentPage - 1;

} else if(actionKey == 'next') {

if(this.currentPage >= this.pageCount - 1){

return;

}

this.currentPage = this.currentPage + 1;

} else {

this.currentPage = Number(actionKey);

}

this.validateIfFirstLast();

}

validateIfFirstLast(){

if(this.currentPage == 0) {

this.pageValidation = { isFirst: true, isLast: false};

} else if(this.currentPage == this.pageCount - 1) {

this.pageValidation = { isFirst: false, isLast: true};

} else {

this.pageValidation = { isFirst: false, isLast: false};

}

}

}

---------------------

作者：Junyuan_123

来源：CSDN

原文：https://blog.csdn.net/Junyuan_123/article/details/79486276

版权声明：本文为博主原创文章，转载请附上博文链接！