上篇介绍了后端分页处理,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!