关于Angular2+下数据表分页的实现

业务需求：

• 正常分页功能要有。
• 要做到缓加载（那个不全部加载表数据，随着查看，动态加载数据的那个名词叫啥来着？）

代码实现：

分页组件界面部分：

  

    
      <<
      {{page.pageNo}}
      >>
    
    总计 {{pageParams.primaryTableTotalRows}} 条，第 {{pageParams.currentPage}} / {{pageParams.totalPagesAmount}} 页
  

空

分页组件逻辑部分：

export class PageComponent implements OnInit {
  @Input('pageParams') pageParams;
  @Output() changeCurrentPage: EventEmitter = 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条。

在每一个具体业务中，界面分页部分的代码如下：

逻辑部分代码如下：

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