[英]How to display paging results using paging id using ngx-datatable & angular?
要求 :
使用ngx-datatable顯示動態數據,並使用頁面ID使用分頁
說明 :
我有一個動態數據,我在角度使用ngx-datatable顯示它,這里一切正常但問題我不知道如何使用page_id應用分頁(使用post body發送到服務器)。 在這里,我得到page_id以及API響應,這是第一次API調用。 這里必須將page_id作為一個主體發送給同一個API以獲取其余的結果。
例如:假設我在1ST API調用中有20個結果我將通過使用頁面ID獲取10條記錄和頁面ID如何獲得接下來的10個結果
我實施的內容:
獲取數據並將其顯示在應用的表基本分頁中
以下是我的代碼:
Result=[];
reorderable: boolean = true;
selected = [];
rows = [];
columns = [];
DataArray = [];
Results = {
"data": [
{
"_score": 0.36464313,
"_type": "data",
"_id": "abcd",
"_source": {
"filter": "data",
"information": {
"product_id": "abcd",
"creation_utctime": "1477335693653"
},
"enduser": "free"
},
"_index": "dell_laptop"
},
{
"_score": 0.36464314,
"_type": "data",
"_id": "abcde",
"_source": {
"filter": "data",
"information": {
"product_id": "abcde",
"creation_utctime": "1477335693653"
},
"enduser": "free"
},
"_index": "lenovo_laptop"
},
{
"_score": 0.36464314,
"_type": "data",
"_id": "abcdef",
"_source": {
"filter": "data",
"information": {
"product_id": "abcde",
"creation_utctime": "1477335693653"
},
"enduser": "free"
},
"_index": "lenovo_laptop"
}
],
"total": 4,
"page_id": "WpNdVJMMjlJVnJTYTFuUklB"
}
LoadInfo(){
this.DataArray = ["filter","information.product_id","information.creation_utctime","enduser"];
this.rows=[];
this.Result = this.Results['data'];
// tslint:disable-next-line: forin
for (var res in this.Result) {
var row = {};
for (var key in this.Result[res]['_source']) {
if (typeof this.Result[res]['_source'][key] === 'object') {
for (var k in this.Result[res]['_source'][key]) {
let temp = key + "." + k;
row[temp] = this.Result[res]['_source'][key][k];
}
} else {
row[key] = this.Result[res]['_source'][key]
}
row['_id'] = this.Result[res]['_id'];
}
this.rows.push(row);
}
console.log(this.rows);
}
onActivate(event) {
// console.log('Activate Event', event);
}
onSelect({ selected }) {
// console.log('Select Event', selected, this.selected);
this.selected.splice(0, this.selected.length);
this.selected.push(...selected);
}
HTML代碼:
<button type="button" (click)="LoadInfo()">LoadData</button>
<div>
<ngx-datatable class="material ui" [rows]="rows" [columnMode]="'force'" [headerHeight]="50"
[footerHeight]="50" [limit]="2" [rowHeight]="'auto'" [reorderable]="reorderable" [selected]="selected"
[selectionType]="'checkbox'" [scrollbarH]="true" [sortType]="'multi'" (activate)="onActivate($event)"
(select)='onSelect($event)'>
<ngx-datatable-column [width]="30" [sortable]="true" [canAutoResize]="false" [draggable]="false"
[resizeable]="false" class="uih">
<ng-template ngx-datatable-header-template let-value="value" let-allRowsSelected="allRowsSelected"
let-selectFn="selectFn">
<input type="checkbox" [checked]="allRowsSelected" (change)="selectFn(!allRowsSelected)" />
</ng-template>
<ng-template ngx-datatable-cell-template let-value="value" let-isSelected="isSelected"
let-onCheckboxChangeFn="onCheckboxChangeFn">
<input type="checkbox" [checked]="isSelected" (change)="onCheckboxChangeFn($event)" />
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column *ngFor="let attr of DataArray" [sortable]="true" prop={{attr}} name={{attr}}>
</ngx-datatable-column>
</ngx-datatable>
</div>
Stackblitz鏈接: https ://stackblitz.com/edit/angular-secw8u
注意:即使在10條記錄之后還有一些頁面也存在,也可能沒有更多的記錄
這里api調用是簡單的發布請求
api : https://xxxx.xxxx..com/<some method>
body: { "key1":"data1","key2":"data2","pageid":"ss"}
在第一個api調用中,我們不會發送頁面ID,因為在調用第一個api調用之后我們將得到響應,因為我們將得到pageid和第二個api調用我的意思是分頁然后我們必須使用pageid
對於分頁,您需要知道總頁數。 否則,您需要總項目數以及每頁的項目數( 以獲得總頁數 )。 在您的情況下,您只有一個頁面ID,甚至沒有說明您所在的頁面。 page-id僅允許您訪問下一頁項目。
如果您實現無限滾動功能,此API非常有用。 否則,您只能實現一個更多按鈕,將新項目加載到表中。 您在注釋中提供的鏈接實現了更多按鈕功能。
因此,您可以覆蓋ngx-datatable
的默認頁腳以添加更多按鈕以將更多項目加載到表中。
<ngx-datatable-footer>
<ng-template ngx-datatable-footer-template
let-rowCount="rowCount"
let-pageSize="pageSize"
let-selectedCount="selectedCount"
let-curPage="curPage"
let-offset="offset"
let-isVisible="isVisible">
<div class="datatable-footer-inner selected-count">
<div class="page-count" *ngIf="selectedCount">
<span> {{selectedCount}} selected / </span> {{rowCount}} total
</div>
<div class="datatable-pager">
<ul class="pager">
<li class="pages active" role="button" aria-label="next" *ngIf="rowCount">
<a href="javascript:void(0)" (click)="LoadInfo()"> Next </a>
</li>
</ul>
</div>
</div>
</ng-template>
</ngx-datatable-footer>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.