mirror of https://github.com/abpframework/abp.git
committed by
GitHub
13 changed files with 20 additions and 317 deletions
@ -1,38 +0,0 @@ |
|||||
<div |
|
||||
class="ui-paginator-bottom ui-paginator ui-widget ui-widget-header ui-unselectable-text ui-helper-clearfix" |
|
||||
> |
|
||||
<a |
|
||||
class="ui-paginator-first ui-paginator-element ui-state-default ui-corner-all" |
|
||||
[class.ui-state-disabled]="value === 1" |
|
||||
tabindex="-1" |
|
||||
(click)="changePage(1)" |
|
||||
><span class="ui-paginator-icon pi pi-step-backward"></span></a |
|
||||
><a |
|
||||
class="ui-paginator-prev ui-paginator-element ui-state-default ui-corner-all" |
|
||||
[class.ui-state-disabled]="value === 1" |
|
||||
tabindex="-1" |
|
||||
(click)="changePage(value - 1)" |
|
||||
><span class="ui-paginator-icon pi pi-caret-left"></span></a |
|
||||
><span class="ui-paginator-pages" |
|
||||
><a |
|
||||
*ngFor="let page of pageArray; trackBy: trackByFn" |
|
||||
(click)="changePage(page)" |
|
||||
class="ui-paginator-page ui-paginator-element ui-state-default ui-corner-all" |
|
||||
[class.ui-state-active]="page === value" |
|
||||
tabindex="0" |
|
||||
>{{ page }}</a |
|
||||
></span |
|
||||
><a |
|
||||
class="ui-paginator-next ui-paginator-element ui-state-default ui-corner-all" |
|
||||
[class.ui-state-disabled]="value === totalPages" |
|
||||
tabindex="0" |
|
||||
(click)="changePage(value + 1)" |
|
||||
><span class="ui-paginator-icon pi pi-caret-right"></span></a |
|
||||
><a |
|
||||
class="ui-paginator-last ui-paginator-element ui-state-default ui-corner-all" |
|
||||
[class.ui-state-disabled]="value === totalPages" |
|
||||
tabindex="0" |
|
||||
(click)="changePage(totalPages)" |
|
||||
><span class="ui-paginator-icon pi pi-step-forward"></span |
|
||||
></a> |
|
||||
</div> |
|
||||
@ -1,55 +0,0 @@ |
|||||
import { Component, Input, OnInit, Output, EventEmitter, TrackByFunction } from '@angular/core'; |
|
||||
|
|
||||
@Component({ |
|
||||
selector: 'abp-pagination', |
|
||||
templateUrl: 'pagination.component.html', |
|
||||
}) |
|
||||
/** |
|
||||
* @deprecated |
|
||||
*/ |
|
||||
export class PaginationComponent implements OnInit { |
|
||||
private _value = 1; |
|
||||
@Input() |
|
||||
get value(): number { |
|
||||
return this._value; |
|
||||
} |
|
||||
set value(newValue: number) { |
|
||||
if (this._value === newValue) return; |
|
||||
|
|
||||
this._value = newValue; |
|
||||
this.valueChange.emit(newValue); |
|
||||
} |
|
||||
|
|
||||
@Output() |
|
||||
readonly valueChange = new EventEmitter<number>(); |
|
||||
|
|
||||
@Input() |
|
||||
totalPages = 0; |
|
||||
|
|
||||
get pageArray(): number[] { |
|
||||
const count = this.totalPages < 5 ? this.totalPages : 5; |
|
||||
|
|
||||
if (this.value === 1 || this.value === 2) { |
|
||||
return Array.from(new Array(count)).map((_, index) => index + 1); |
|
||||
} else if (this.value === this.totalPages || this.value === this.totalPages - 1) { |
|
||||
return Array.from(new Array(count)).map((_, index) => this.totalPages - count + 1 + index); |
|
||||
} else { |
|
||||
return [this.value - 2, this.value - 1, this.value, this.value + 1, this.value + 2]; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
trackByFn: TrackByFunction<number> = (_, page) => page; |
|
||||
|
|
||||
ngOnInit() { |
|
||||
if (!this.value || this.value < 1 || this.value > this.totalPages) { |
|
||||
this.value = 1; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
changePage(page: number) { |
|
||||
if (page < 1) return; |
|
||||
else if (page > this.totalPages) return; |
|
||||
|
|
||||
this.value = page; |
|
||||
} |
|
||||
} |
|
||||
Loading…
Reference in new issue