Angular2.x 分页组件

╰+攻爆jí腚メ 2022-05-27 11:48 239阅读 0赞

angular2.x分页组件    包括：第一页/最后一页/上一页/下一页。

用户可以自定义：

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

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

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

例子，共10条数据

<paginator \[ totalRecords \]= "10"

\[ rows \]= "3"

\[ currentPage \]= "0"

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

</paginator>

![70][]

<paginator \[ totalRecords \]= "10"

\[ rows \]= "1"

\[ currentPage \]= "0"

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

</paginator>

![70 1][]

![70 2][]

HTML:

<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*: 50 px;

*height*: 50 px;

*border*: solid 1 px \#ececec;

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

ul .pageUi li :first-child \{

*border-left-width*: 1 px;

*border-radius*: 5 px 0 0 5 px;

ul .pageUi li :last-child \{

*border-radius*: 0 5 px 5 px 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*: 50 px;

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\};

[70]: /images/20220527/f92fa29a3c4746e1bbfd143f70ed4b9a.png
[70 1]: /images/20220527/8d418fe29b6c4e5ab9c772c449d61696.png
[70 2]: /images/20220527/34b983e5b7264c0ebcd0cdc98492aa7f.png

Angular2.x 分页组件

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 vue2.0自定义分页组件

相关 Angular 1.x 和 Angular 2.x 的区别

相关 Angular Js 分页显示数据

相关 Angular2——创建组件

相关 Angular2.x 分页组件

相关 Angular1.x实现分页和分页算法

相关 Angular2组件间交互

相关初探Angular6.x---主从组件

相关 Angular2 组件生命周期

相关 angular+pagination实现分页效果