跟着JHipster学做项目 (12) 分页处理（下）前端进行分页及排序查询

上篇介绍了后端分页处理，JHipster的前端分页组件由两部分组成：分页信息组件，分页加载组件。

<div v-show="users && users.length > 0">
            <div class="row justify-content-center">
                <jhi-item-count :page="page" :total="queryCount" :itemsPerPage="itemsPerPage"></jhi-item-count>
            </div>
            <div class="row justify-content-center">
                <b-pagination size="md" :total-rows="totalItems" v-model="page" :offset="1" :per-page="itemsPerPage" :change="loadPage(page)"></b-pagination>
            </div>
        </div>

组装查询请求的方法：

export default function buildPaginationQueryOpts(paginationQuery) {
  if (paginationQuery) {
    let sorts = '';
    for (const idx of Object.keys(paginationQuery.sort)) {
      if (sorts.length > 0) {
        sorts += '&';
      }
      sorts += 'sort=' + paginationQuery.sort[idx];
    }
    return `${sorts}&page=${paginationQuery.page}&size=${paginationQuery.size}`;
  }
  return '';
}

发起查询请求，并从返回报文的header中获取分页信息

  public loadAll(): void {
    this.userManagementService()
      .retrieve({
        page: this.page - 1,
        size: this.itemsPerPage,
        sort: this.sort()
      })
      .then(res => {
        this.users = res.data;
        this.totalItems = Number(res.headers['x-total-count']);
        this.queryCount = this.totalItems;
      });
  }

当排序字段或者排序方向发生改变时，添加新的排序字段并重新发起查询请求

  public transition(): void {
    this.loadAll();
  }

  public changeOrder(propOrder: string): void {
    this.propOrder = propOrder;
    this.reverse = !this.reverse;
    this.transition();
  }

Good Luck,

Cheers!