我正在尝试在我的angular 6项目中通过搜索,排序和分页在表格视图(ag-grid-angular
)中显示数据。
我的数据来自spring boot API。
我要从此API获得数千条记录,因此我希望按照从角端开始的分页将获取的记录分为20条记录,因此我的API一次只能获取20条记录。
我无法在线获取有关此数据表分页末尾数据的任何帮助,我想每次到达下一页时都将start和end索引传递给启动API。
卡车清单.component.Html:
<div class="top-bar clearfix">
<div class="row">
<div class="col-xs-5">
<button class="btn btn-primary" (click)="cteateTruck()">Create
Truck</button>
</div>
</div>
</div>
<ag-grid-angular
style="width: 1950px; height:900px;"
class="ag-theme-balham"
[columnDefs]="columnDefs"
[enableSorting]="true"
[enableFilter]="true"
[animateRows]="true"
[pagination]="true"
(gridReady)="onGridReady($event)"></ag-grid-angular>
truck-component.ts
constructor(private http : HttpClient, private router:Router){
console.log("controller is call.")
this.columnDefs = [
{
headerName: "Truck Number",
field: "conveyancenumber",
width:380,
sortingOrder:["asc","desc",null]
},
{
headerName:"Truck Type",
field:"conveyancetype",
width:380,
sortingOrder:["asc","desc",null]
},
{
headerName:"Last Update",
field:"lastupdate",
width:387,
sortingOrder:["asc","desc",null]
}];
}
onGridReady(params){
this.gridApi=params.Api;
this.gridColumnApi=params.gridColumnApi;
this.http.get("http://localhost:8080/abcd/getTrucksRecord")
.subscribe(data => {
params.api.setRowData(data);
}
);
}