显示条目，默认0 @Input() rows: number = 0; //显示分页按钮数量，默认5 @Input() pageLinkSize: number = 5; //点击按钮后向父组件发送事件 @Output() onPageChange: EventEmitter = new EventEmitter(); //调整每页显示条目数量的下拉菜单 @Input() rowsPerPageOptions: number[]; //定义分页按钮 pageLinks: number[]; _totalRecords: number = 0; _first: number = 0; //数据总数 @Input() get totalRecords(): number { return this._totalRecords; } set totalRecords(val: number) { this._totalRecords = val; this.updatePageLinks(); } //高亮按钮位置 @Input() get first(): number { return this._first; } set first(val: number) { this._first = val; this.updatePageLinks(); }

获取一共多少页 getPageCount() { return Math.ceil(this.totalRecords / this.rows) || 1; }

//获取当前页,0为第一页
getPage(): number {
return Math.floor(this.first / this.rows);
}

//是否为第一页
isFirstPage(): boolean {
return this.getPage() === 0;
}

//是否为最后一页
isLastPage(): boolean {
return this.getPage() === this.getPageCount() - 1;
}

显示的起始分页和结束分页 calculatePageLinkBoundaries() { let numberOfPages = this.getPageCount(); let visiblePages = Math.min(this.pageLinkSize,numberOfPages); let start = Math.max(0,Math.ceil(this.getPage() - (visiblePages / 2))); let end = Math.min(numberOfPages - 1,start + visiblePages - 1);

const delta = this.pageLinkSize - (end - start + 1);
start = Math.max(0,start - delta);
return [start,end];
}

//更新需要显示的分页条目
updatePageLinks(): void {
this.pageLinks = [];
let boundaries = this.calculatePageLinkBoundaries;
const start = boundaries[0];
const end = boundaries[1];
for (let i = start; i <= end; i++) {
this.pageLinks.push(i + 1);
}
}

//点击分页
changePage(p: number,event) {
var pageCount = this.getPageCount();
if (p > 0 && p < pageCount) {
this.first = this.rows * p;
const state = {
page: p,first: this.first,rows: this.rows,pageCount: pageCount
};
this.updatePageLinks();

this.onPageChange.emit(state);
}
if (event) {
event.preventDefault();
}
}

//上一页
changePageToPrev(event){
this.changePage(this.getPage() - 1,event);
}

//下一页
changePageToNext(event){
this.changePage(this.getPage() + 1,event);
}

//最后一页
changePageToLast(event){
this.changePage(this.getPageCount() - 1,event);
}

//通过下拉菜单更改每页显示数量
onRppChange(event){
this.rows = this.rowsPerPageOptions[event.target.selectedIndex];
this.changePageToFirst(event);
}