javascript - Angular table call api on pagination
问题描述
I have a table returning data fro API url and data is paginated by default from server. I want to call new data when I click on page 2
, 3
, etc.
and return data of those page from server.
I am using ant design for my table and to be honest I don't really understand their callback methods in documents, so I'm looking for help to make this happen. documents
Code
Script
listOfData: DataItem[] = []
limit = ''
page = ''
pages = ''
ngOnInit(): void {
this.getList();
}
getList() {
this.helpdeskService.getList().subscribe((res) => {
this.listOfData = res.data;
this.limit = res.limit //10
this.page = res.page //1
this.pages = res.pages //2
if(this.listOfData.length > 0){
this.isSpinning = false;
} else {
this.isSpinning = true;
}
},
(error) => {
console.log('data', error)
});
}
HTML
<ng-template #rangeTemplate let-range="range" let-total>Display {{ range[1] }} of {{ total }} items </ng-template>
<nz-table
#filterTable
nzShowSizeChanger
(nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
[nzData]="listOfData" class="kit__utils__table mb-4"
[nzPageSizeOptions]="[5, 10, 20, 30, 40]"
[nzPageSize]="limit"
[nzPageIndex]="page"
[nzShowTotal]="rangeTemplate">
<thead>
//...
</thead>
<tbody>
..//
</tbody>
</nz-table>
Any idea?
解决方案
You need to add Callback when pageIndex changes
add [nzTotal]="totalPages" (nzPageIndexChange)="onPageIndexChange($event)"
to the template
html
<ng-template #rangeTemplate let-range="range" let-total>Display {{ range[1] }} of {{ total }} items </ng-template>
<nz-table
#filterTable
nzShowSizeChanger
(nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
(nzPageIndexChange)="onPageIndexChange($event)"
[nzData]="listOfData" class="kit__utils__table mb-4"
[nzPageSizeOptions]="[5, 10, 20, 30, 40]"
[nzPageSize]="limit"
[nzPageIndex]="page"
[nzTotal]="totalPages"
[nzFrontPagination]="false"
[nzShowPagination]="true"
[nzShowTotal]="rangeTemplate">
<thead>
//...
</thead>
<tbody>
..//
</tbody>
</nz-table>
add this to ts file
getList(pageIndex: number | null): Observable < any > {
const endpoint=pageIndex? `${this.env.HELPDESK_LIST}?start=${pageIndex}&limit=5`: this.env.HELPDESK_LIST
const tokenPromise =
this.token === undefined
? store.get('accessToken')
: Promise.resolve(this.token);
return from(tokenPromise).pipe(
switchMap((token) => {
this.token = this.token;
const httpOptions = {
headers: new HttpHeaders({
Accept: 'application/json, text/plain',
'Content-Type': 'application/json',
Authorization: 'Token ' + this.token,
}),
};
return this.http
.get(endpoint, httpOptions)
.pipe(map((data) => data));
})
);
}
getList(pageIndex) {
this.helpdeskService.getList(pageIndex).subscribe((res) => {
this.listOfData = res.data;
this.limit = res.limit //10
this.page = res.page //1
this.totalPages = res.total
this.pages = res.pages //2
if(this.listOfData.length > 0){
this.isSpinning = false;
} else {
this.isSpinning = true;
}
},
(error) => {
console.log('data', error)
});
}
onPageIndexChange(pageIndex: number | null){
console.log(pageIndex) // get you the page index
// make api call requesting data for only that page index
this.getList(pageIndex)
}
推荐阅读
- linux - SSHD 不会在 Yocto 上启动。密钥文件有问题
- react-native - react-native-storage 从本地存储返回未定义
- excel - +10000 行中的超快速查找和替换
- amazon-web-services - 将密钥对添加到 AWS EKS Kubernetes 节点的 EC2 实例
- shopify - 如何将 WooCommerce 上的订单数据导入 Shopify 迁移?
- javascript - 网页抓取:Servlet
- excel - 保存数据后 Excel 宏事件不起作用
- c# - 在主页上选择网站的最后 4 个帖子
- python - Python 抓取可扩展表(BeautifulSoup)?
- reactjs - 带有 Lerna + React + Styled 组件的 SSR