如何通过搜索,排序和分页查看每个分页表中的数据

时间:2019-06-11 05:23:07

标签: angular6 ag-grid-angular

我正在尝试在我的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);
 }
  );
  }    

0 个答案:

没有答案