Querying the api for data using Angular when paginating the table

Question

Querying the api for data using Angular when paginating the table

Currently, I have a table that retrieves data from an API URL, and the data is paginated by default on the server. My goal is to fetch new data when clicking on pages 2, 3, etc., returning the corresponding page's data from the server.

I am using ant design for my table, but I find their callback methods in the documentation confusing. Therefore, I am seeking assistance to achieve this functionality. Check out the documentation for reference.

Code

Script

listOfData: DataItem[] = []
limit = ''
page = ''
pages = ''

ngOnInit(): void {
  this.getList();
}

getList() {
  this.helpdeskService.getList().subscribe((res) => {
      this.listOfData = res.data;

      this.limit = res.limit //10
      this.page = res.page  //1
      this.pages = res.pages  //2

      if(this.listOfData.length > 0){
        this.isSpinning = false;
      } else {
        this.isSpinning = true;
      }
  },
  (error) => {
    console.log('data', error)
  });
}

HTML

<ng-template #rangeTemplate let-range="range" let-total>Display {{ range[1] }} of {{ total }} items </ng-template>
<nz-table
  #filterTable
  nzShowSizeChanger
  (nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
  [nzData]="listOfData" class="kit__utils__table mb-4"
  [nzPageSizeOptions]="[5, 10, 20, 30, 40]"
  [nzPageSize]="limit"
  [nzPageIndex]="page"
  [nzShowTotal]="rangeTemplate">
  <thead>
  //...
  </thead>
  <tbody>
    ..//
  </tbody>
</nz-table>

Can anyone assist with implementing this feature?

javascript angular typescript ant-design-pro

Answer 1

Answer №1

Whenever the pageIndex changes, remember to include a Callback function

Insert the following code snippet into your template:

[nzTotal]="totalPages" (nzPageIndexChange)="onPageIndexChange($event)"

For HTML:

<ng-template #rangeTemplate let-range="range" let-total>Display {{ range[1] }} of {{ total }} items </ng-template>
<nz-table
  #filterTable
  nzShowSizeChanger
  (nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
  (nzPageIndexChange)="onPageIndexChange($event)"
  [nzData]="listOfData" class="kit__utils__table mb-4"
  [nzPageSizeOptions]="[5, 10, 20, 30, 40]"
  [nzPageSize]="limit"
  [nzPageIndex]="page"
  [nzTotal]="totalPages"
  [nzFrontPagination]="false" 
  [nzShowPagination]="true" 
  [nzShowTotal]="rangeTemplate">
  <thead>
  //...
  </thead>
  <tbody>
    ..//
  </tbody>
</nz-table>

Add the following code to your TypeScript file:

getList(pageIndex: number | null): Observable < any > {
  const endpoint=pageIndex? `${this.env.HELPDESK_LIST}?start=${pageIndex}&limit=5`: this.env.HELPDESK_LIST
  const tokenPromise =
    this.token === undefined
      ? store.get('accessToken')
      : Promise.resolve(this.token);

  return from(tokenPromise).pipe(
    switchMap((token) => {
      this.token = this.token;
      const httpOptions = {
        headers: new HttpHeaders({
          Accept: 'application/json, text/plain',
          'Content-Type': 'application/json',
          Authorization: 'Token ' + this.token,
        }),
      };
      return this.http
        .get(endpoint, httpOptions)
        .pipe(map((data) => data));
    })
  );
}

getList(pageIndex) {
  this.helpdeskService.getList(pageIndex).subscribe((res) => {
      this.listOfData = res.data;

      this.limit = res.limit //10
      this.page = res.page  //1
      this.totalPages = res.total
      this.pages = res.pages  //2

      if(this.listOfData.length > 0){
        this.isSpinning = false;
      } else {
        this.isSpinning = true;
      }
  },
  (error) => {
    console.log('data', error)
  });
}
onPageIndexChange(pageIndex: number | null){
    console.log(pageIndex) // get you the page index
    // make api call requesting data for only that page index
   this.getList(pageIndex)

  }

Answer 2

Whenever the pageIndex changes, remember to include a Callback function

Insert the following code snippet into your template:

[nzTotal]="totalPages" (nzPageIndexChange)="onPageIndexChange($event)"

For HTML:

<ng-template #rangeTemplate let-range="range" let-total>Display {{ range[1] }} of {{ total }} items </ng-template>
<nz-table
  #filterTable
  nzShowSizeChanger
  (nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
  (nzPageIndexChange)="onPageIndexChange($event)"
  [nzData]="listOfData" class="kit__utils__table mb-4"
  [nzPageSizeOptions]="[5, 10, 20, 30, 40]"
  [nzPageSize]="limit"
  [nzPageIndex]="page"
  [nzTotal]="totalPages"
  [nzFrontPagination]="false" 
  [nzShowPagination]="true" 
  [nzShowTotal]="rangeTemplate">
  <thead>
  //...
  </thead>
  <tbody>
    ..//
  </tbody>
</nz-table>

Add the following code to your TypeScript file:

getList(pageIndex: number | null): Observable < any > {
  const endpoint=pageIndex? `${this.env.HELPDESK_LIST}?start=${pageIndex}&limit=5`: this.env.HELPDESK_LIST
  const tokenPromise =
    this.token === undefined
      ? store.get('accessToken')
      : Promise.resolve(this.token);

  return from(tokenPromise).pipe(
    switchMap((token) => {
      this.token = this.token;
      const httpOptions = {
        headers: new HttpHeaders({
          Accept: 'application/json, text/plain',
          'Content-Type': 'application/json',
          Authorization: 'Token ' + this.token,
        }),
      };
      return this.http
        .get(endpoint, httpOptions)
        .pipe(map((data) => data));
    })
  );
}

getList(pageIndex) {
  this.helpdeskService.getList(pageIndex).subscribe((res) => {
      this.listOfData = res.data;

      this.limit = res.limit //10
      this.page = res.page  //1
      this.totalPages = res.total
      this.pages = res.pages  //2

      if(this.listOfData.length > 0){
        this.isSpinning = false;
      } else {
        this.isSpinning = true;
      }
  },
  (error) => {
    console.log('data', error)
  });
}
onPageIndexChange(pageIndex: number | null){
    console.log(pageIndex) // get you the page index
    // make api call requesting data for only that page index
   this.getList(pageIndex)

  }

Querying the api for data using Angular when paginating the table

Code

Answer №1

Similar questions

What is the reason behind a TypeScript compiler error being triggered by an 'if-else' statement, while a ternary operator construct that appears identical does not raise any errors?

Grails: Javascript function for updating the image source is unresponsive

Updating a section of a component using another component

The Best Way to Filter Mongo Documents Using Nested Objects

What is the best way to implement Axios for data fetching in Gatsby's useStaticQuery function?

"Encountering an issue with Angular's npm run serve:ssr

Step-by-step guide on how to display chosen values in a multi-select dropdown menu

Using Angular 2 for two-way binding with input masking

Please refresh the page after acknowledging the error

What is the best way to combine an array into a single string and insert it into a textarea with line breaks?

The delay in loading HTML content using FOSJsRoutingBundle and Ajax for a specific route parameter (ID)

Conceal element when unchecked

Enhancing appearance with $refs?

What could be the reason for react-query searching for dispatch even when redux is not activated or present in the component?

Executing `removeChild` within a timeout during page load does not yield the expected results

Exploring ways to personalize Angular UI Bootstrap tabs to match the styling of Angular Material tabs

Issue with executing Jquery in PUG file: The $ sign is not being recognized despite jQuery being imported

React Redux Connect MapState not refreshing when filtering an item from a list

Utilizing AJAX to load a WAV file

Link commitments and ornament an entity