Angular Bootstrap как добавить нумерацию страниц - PullRequest
Новая
       23

Angular Bootstrap как добавить нумерацию страниц

0 голосов
/ 08 июля 2019

Мне нужно знать, как добавить пагинацию в мое угловое приложение.Данные большие, поэтому я хочу показать их в пейджере, как в первом массиве пейджера 30.

Это мой HTML-файл 

     <table class="table table-responsive-md text-center">
        <thead>
           <tr>
             <th>STATUS</th>
             <th>Name</th>
             <th>Patient Name</th>
             <th>Approved Amount</th>
             <th>Claimed Amount</th>
             <th>Company</th>
             <th>Submitted By</th>
             <th>Claim No</th>
           </tr>
       </thead>

      <tbody>

         <tr *ngFor="let x of data1 | filterBy: userFilter" (click)="openDeal(deletecontent, x)" >
           <td>
             <span class="text-success">{{x.status}}</span>
           </td>
           <td >
             <div style="text-align: left;">
              <img [src]="x.userPhoto || 'https://mbtskoudsalg.com/images/user-image-png.png'" class="img-sm" alt="" style="text-align: left;">
              {{x.member_name}}
             </div>
           </td>
          <td style="text-align: left;">{{x.patient_name}}</td>
          <td>{{x.approved_value}}</td>
          <td>{{x.claimed_value}}</td>
          <td>                                      
            <span  class="text-success" >{{x.company_id}}</span>
          </td>
          <td>{{x.submitted_at || 'not-defined'}}</td>
          <td>{{x.claim_id}}</td>

        </tr>
       </tbody>
      </table>

Я получаю данные по http-запросу 

this.url = 'http://url.com/insurance_IgiGen/insurance-api/get_claims.php?offset=0&limit=10';

this.clientData = this.httpClient.get<any>(this.url,
{
params: {
policy_id: this.userFilter.policy_id     
 },

}).
subscribe(data => {
console.log(data);
this.spinner.hide();

this.data1 = data.records;

});

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

1 Ответ

0 голосов
/ 08 июля 2019

Компонент нумерации на стороне клиента: 

<div class="card-list-footer">
  <i (click)="prevPage()"
  [ngClass]="{'card-pagination-icon-disabled': currentIndex === 0}" class="fa fa-chevron-left card-pagination-icon"></i>
  <i (click)="nextPage()"
  [ngClass]="{'card-pagination-icon-disabled': currentIndex >= (totalList.length - pageCount)}"
  class="fa fa-chevron-right card-pagination-icon card-pagination-icon--right"></i>
</div>

Логика компонента нумерации на стороне клиента: 

import { Component, OnInit, Input, Output, EventEmitter} from '@angular/core';

@Component({
  selector: 'app-pagination',
  templateUrl: './pagination.component.html',
  styleUrls: ['./pagination.component.scss']
})
export class PaginationComponent implements OnInit {
  private _totalPages: number;
  public totalList: Array<any> = [];

  @Input('list-items') set listItems(value) {
    if (value && value !== this.totalList) {
      this.totalList = value;
      this._totalPages  = value.length;
    }
  }

  public currentIndex = 0;

  @Input('page-count') pageCount = 5;
  @Output()  paginate = new EventEmitter<any>();

  constructor() { }

  ngOnInit() {
  }

  paginateCard() {
    this.paginate.emit(this.totalList.slice(this.currentIndex, this.currentIndex + this.pageCount));
  }

  prevPage() {
    if (this.currentIndex === 0) {
      return;
    }
    this.currentIndex -= this.pageCount;
    this.paginateCard();
  }

  nextPage() {
    if (this.currentIndex >= (this.totalList.length - this.pageCount)) {
      return;
    }
    this.currentIndex += this.pageCount;
    this.paginateCard();
  }

}

Как использовать компонент нумерации страниц в компоненте таблицы: 

 <table class="table table-responsive-md text-center">
    <thead>
       <tr>
         <th>STATUS</th>
         <th>Name</th>
         <th>Patient Name</th>
         <th>Approved Amount</th>
         <th>Claimed Amount</th>
         <th>Company</th>
         <th>Submitted By</th>
         <th>Claim No</th>
       </tr>
   </thead>

  <tbody>

     <tr *ngFor="let x of pagedData | filterBy: userFilter" (click)="openDeal(deletecontent, x)" >
       <td>
         <span class="text-success">{{x.status}}</span>
       </td>
       <td >
         <div style="text-align: left;">
          <img [src]="x.userPhoto || 'https://mbtskoudsalg.com/images/user-image-png.png'" class="img-sm" alt="" style="text-align: left;">
          {{x.member_name}}
         </div>
       </td>
      <td style="text-align: left;">{{x.patient_name}}</td>
      <td>{{x.approved_value}}</td>
      <td>{{x.claimed_value}}</td>
      <td>                                      
        <span  class="text-success" >{{x.company_id}}</span>
      </td>
      <td>{{x.submitted_at || 'not-defined'}}</td>
      <td>{{x.claim_id}}</td>

    </tr>
   </tbody>
  </table>
  <app-audit-log-pagination [list-items]="data1" [page-count]="5"
              (paginate)="setCurrentPageArr($event)"></app-audit-log-pagination>

Логика компонента вашей таблицы: 

public data1: any;
public pagedData: any;

ngOnInit() {
    this.url = 'http://url.com/insurance_IgiGen/insurance-api/get_claims.php?offset=0&limit=10';

   this.clientData = this.httpClient.get<any>(this.url,
     {
      params: {
        policy_id: this.userFilter.policy_id
     },

   }).
    subscribe(data => {
      console.log(data);
      this.spinner.hide();

      this.data1 = data.records;
      this.pagedData = data.records.slice(0,5);
    });
 }

 setCurrentPageArr(slicedArr: Array<any>) {
   this.pagedData = slicedArr;
 }
...