小编给大家分享一下Angular2 PrimeNG分页模块的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
创新互联建站专业为企业提供
锦州网站建设、锦州做网站、锦州网站设计、锦州网站制作等企业网站建设、网页设计与制作、锦州企业网站模板建站服务，十载
锦州做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。
Angular2 PrimeNG源码学习
Paginator分页组件
GITHUB地址
首先分析一下分页功能的需求：
由父组件传入数据总数量，每页显示数量，可自定义初始页
由父组件传入分页按钮个数
有第一页，上一页，下一页，最后一页按钮
可在页面选择性更改每页显示数量
HTML模板代码：
部分代码片段
第一页按钮：
这段代码涉及几个事件。
1.鼠标移入移出更改hoveredItem变量，并以此更改样式
2.点击click事件，调用changePageToFirst(event)处理
上一页，下一页，最后一页和第一页类似
分页按钮：
{{pageLink}}
分页按钮是通过*ngFor从分页按钮数组中循环出来的，所以我们需要去确定这个数组
下面处理数组，和各个按钮的事件
//每页显示条目，默认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();
}
}//第一页
changePageToFirst(event){
this.changePage(0,event);
}
//上一页
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);
}以上是“Angular2 PrimeNG分页模块的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联网站建设公司行业资讯频道！
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
新闻标题：Angular2PrimeNG分页模块的示例分析-创新互联
网页链接：
http://kswsj.com/article/dedjij.html
在线咨询
在线咨询
