業(yè)務需求：

• 正常分頁功能要有。
• 要做到緩加載（那個不全部加載表數(shù)據(jù)，隨著查看，動態(tài)加載數(shù)據(jù)的那個名詞叫啥來著？）

代碼實現(xiàn)：

分頁組件界面部分：

<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; // 每頁獲取多少條數(shù)據(jù)

因為根據(jù)需求，我們的分頁并無需支持跳躍讀頁，也就是說，要讀后面的表數(shù)據(jù)，只能從前面一步一步讀過去。pagingSkipRange定義的是分頁label顯示的頁的范圍，比如定義的數(shù)字是5，那么起始分頁欄就長成這樣：[1,2,3,4,5]，翻一頁，下一個就是：[6,7,8,9,10]，以此類推。rowsPerPage定義的是數(shù)據(jù)表每頁顯示多少行數(shù)據(jù)，比如5、10、20……值得一提的是，我們約定了一個規(guī)則，那就是pagingSkipRange * rowsPerPage的結果確定了我們預取的數(shù)據(jù)行的數(shù)量，比如pagingSkipRange=5， rowsPerPage=10，那第一次以及每一次取數(shù)據(jù)的行數(shù)就是50條。

在每一個具體業(yè)務中，界面分頁部分的代碼如下：

<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, '');
}