业务需求：
- 正常分页功能要有。
- 要做到缓加载（那个不全部加载表数据，随着查看，动态加载数据的那个名词叫啥来着？）
代码实现：
分页组件界面部分：
<div class="col-md-12 margin-bottom" *ngIf="pageParams.primaryTableTotalRows > 0">
<li class="input-group">
<span class="input-group-addon" style="border-color: #f2f4f8;background-color:#f2f4f8;">
<button class="page-link previous" [disabled]="pageParams.currentPage<=full.pagingSkipRange" (click)="changePage(0, pageParams.currentPage, $event)" [style.color]="pageParams.currentPage<=full.pagingSkipRange ? '#b6b8bb': ''" [style.background-color]="pageParams.currentPage<=full.pagingSkipRange ? '#e0e5ee': ''"><<</button>
<button class="page-link" [disabled]="pageParams.currentPage===page.pageNo" (click)="changePage(1, page.pageNo, $event)" *ngFor="let page of this.pageLabelList" [style.background-color]="pageParams.currentPage===page.pageNo ? '#e0e5ee': ''">{{page.pageNo}}</button>
<button class="page-link next" [disabled]="pageParams.totalPagesAmount-this.pageOffset<full.pagingSkipRange" (click)="changePage(2, pageParams.currentPage, $event)" [style.color]="pageParams.totalPagesAmount-this.pageOffset<full.pagingSkipRange ? '#b6b8bb': ''" [style.background-color]="pageParams.totalPagesAmount-this.pageOffset<full.pagingSkipRange ? '#e0e5ee': ''">>></button>
</span>
<span class="input-group-addon" style="border-color: #f2f4f8;background-color:#f2f4f8;">总计 {{pageParams.primaryTableTotalRows}} 条，第 {{pageParams.currentPage}} / {{pageParams.totalPagesAmount}} 页</span>
</li>
</div>
<div class="col-md-12 text-center text-sm text-dark-gray" *ngIf="!pageParams.primaryTableTotalRows">空</div>
分页组件逻辑部分：
export class PageComponent implements OnInit {
@Input('pageParams') pageParams;
@Output() changeCurrentPage: EventEmitter<Number> = new EventEmitter;
public pageLabelList;
public pageOffset: number;
constructor(private full: FullLayoutComponent) {
this.pageLabelList = [];
this.pageOffset = 1;
}
ngOnInit() {
this.initPageLabelList();
}
public initPageLabelList() {
const pageLabelListSize = this.pageParams.totalPagesAmount <= this.full.pagingSkipRange ? this.pageParams.totalPagesAmount : this.full.pagingSkipRange;
for (let index = 0; index < pageLabelListSize; index++) {
this.pageLabelList.push({pageNo: index + 1});
}
}
getPageLabelList(handleCode, pageNum) {
this.pageLabelList = [];
switch (handleCode) {
case 0:
this.pageOffset = (Math.floor((pageNum - 1) / this.full.pagingSkipRange) - 1) * this.full.pagingSkipRange + 1;
break;
case 2:
this.pageOffset = (Math.floor((pageNum - 1) / this.full.pagingSkipRange) + 1) * this.full.pagingSkipRange + 1;
break;
default:
}
let index = 0;
while (index < this.full.pagingSkipRange && (this.pageOffset + index) <= this.pageParams.totalPagesAmount) {
this.pageLabelList.push({pageNo: this.pageOffset + index});
index++;
}
return this.pageLabelList;
}
changePage(handleCode, pageNum, event) {
switch (handleCode) {
case 0:
this.pageParams.currentPage = this.pageOffset - this.full.pagingSkipRange;
this.changeCurrentPage.emit(this.pageParams.currentPage);
this.getPageLabelList(0, pageNum);
event.target.blur();
break;
case 1:
this.pageParams.currentPage = pageNum;
this.changeCurrentPage.emit(this.pageParams.currentPage);
break;
case 2:
this.pageParams.currentPage = pageNum % this.full.pagingSkipRange === 0 ? pageNum + 1 : Math.floor(pageNum / this.full.pagingSkipRange + 1) * this.full.pagingSkipRange + 1;
this.changeCurrentPage.emit(this.pageParams.currentPage);
this.getPageLabelList(2, pageNum);
event.target.blur();
break;
default:
}
}
}
Notes：
在主界面中有两个变量定义了分页的一些信息：
public pagingSkipRange: number; // 分页跳跃范围
public rowsPerPage: number; // 每页获取多少条数据
因为根据需求，我们的分页并无需支持跳跃读页，也就是说，要读后面的表数据，只能从前面一步一步读过去。pagingSkipRange定义的是分页label显示的页的范围，比如定义的数字是5，那么起始分页栏就长成这样：[1,2,3,4,5]，翻一页，下一个就是：[6,7,8,9,10]，以此类推。rowsPerPage定义的是数据表每页显示多少行数据，比如5、10、20……值得一提的是，我们约定了一个规则，那就是pagingSkipRange * rowsPerPage的结果确定了我们预取的数据行的数量，比如pagingSkipRange=5， rowsPerPage=10，那第一次以及每一次取数据的行数就是50条。
在每一个具体业务中，界面分页部分的代码如下：
<app-page *ngIf="this.isPagingAvailable"
[pageParams]="{primaryTableTotalRows:this.full.params.userModule.primaryTableTotalRows,
currentPage:this.currentPage, totalPagesAmount:this.totalPagesAmount}"
(changeCurrentPage)="getPageData($event)">
</app-page>
逻辑部分代码如下：
getDataTable(page: number, searchInfo: string) {
let respData = '';
const requestUrl = '/user-manage/get-user';
const params = {
rowOffset: (page - 1) * this.full.rowsPerPage,
rowRange: this.full.rowsPerPage * this.full.pagingSkipRange,
searchInfo: searchInfo
};
this.submitService.getSubmitWithRelativeUrl(requestUrl, JSON.stringify(params))
.then(
responseData => respData = responseData,
error => this.errorMessage = <any>error)
.then(() => {
const responseData = JSON.parse(respData);
if (responseData.responseCode === '100') {
alert('您尚未登录或会话过期，请重新登录！');
this.router.navigate(['']).then();
} else {
this.full.params['userModule'].primaryTableData = this.full.params['userModule'].primaryTableData.concat(responseData.userData);
this.full.params['userModule'].primaryTableTotalRows = responseData.totalRows;
this.totalPagesAmount = Math.ceil(this.full.params['userModule'].primaryTableTotalRows / this.full.rowsPerPage);
this.pagesExisted.add(page);
this.isPagingAvailable = true;
this.currentPage = page;
}
});
}
// Invoked each time when paging label was clicked.
getPageData(pageNo) {
if (pageNo % this.full.pagingSkipRange === 1) {
if (!this.pagesExisted.has(pageNo)) {
this.getDataTable(pageNo, this.searchInfo);
return;
}
}
this.currentPage = pageNo;
}
findUser(searchInfo: string) {
if (!searchInfo) {
return;
}
if (this.searchInfo === searchInfo) {
this.currentPage = 1;
} else {
this.pagesExisted.clear();
this.isPagingAvailable = false;
this.full.params['userModule'].primaryTableData = [];
this.full.params['userModule'].primaryTableTotalRows = 0;
this.getDataTable(1, searchInfo);
}
}
refresh(element) {
element.value = '';
this.pagesExisted.clear();
this.isPagingAvailable = false;
this.full.params['userModule'].primaryTableData = [];
this.full.params['userModule'].primaryTableTotalRows = 0;
this.getDataTable(1, '');
}
网友评论