Как просматривать данные в таблице по страницам с поиском, сортировкой и разбиением на страницы - PullRequest
Новая
       13

Как просматривать данные в таблице по страницам с поиском, сортировкой и разбиением на страницы

0 голосов
/ 11 июня 2019

Я пытаюсь отобразить данные в виде таблицы (ag-grid-angular) с поиском, сортировкой и разбиением на страницы в моих угловых 6 проектах.

Мои данные поступают из API весенней загрузки.

Я получаю тысячи записей из этого API, я хочу разбить эту выборку в наборе из 20 записей в соответствии с нумерацией страниц от углового конца, чтобы мой API за раз получал только 20 записей.

Я не могу найти какую-либо справку в Интернете относительно этой нумерации таблиц данных на угловом конце, я хочу передавать начальный и конечный индексы в API загрузки при каждом переходе на следующую страницу.

truck-list.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);
 }
  );
  }
...