Tips for retaining mat table paginator on the chosen page even after refreshing the page

Question

Tips for retaining mat table paginator on the chosen page even after refreshing the page

Utilizing a mat table to display paginated data fetched from my API presents a challenge when the page is refreshed after the user navigates away. Instead of displaying the initial first page, I aim to show the second page.

To achieve this, I store the pageIndex in local storage and retrieve it upon refresh. While my API successfully fetches the second page, the pagination options appear incorrect:

Mat Page Options After Refresh

The displayed range shows 1-8 instead of 9-15, with navigation incorrectly set to the last page.

Below is the snippet of my HTML code:

<mat-paginator
      class="mat-paginator-sticky"
      [hidden]="pageLength <= pageSizeOptions[0]"
      [pageSizeOptions]="pageSizeOptions"
      [showFirstLastButtons]="true"
      [length]="pageLength"
      [pageIndex]="page.pageIndex"
      (page)="pageChange($event)"
      aria-label="Select page of users"
    ></mat-paginator>

And here are snippets of the TypeScript file:

constructor() {
     // Retrieve and set the current page index
     const savedPageIndex = localStorage.getItem('currentPageIndex');
     if (savedPageIndex) {
       this.page.pageIndex = +savedPageIndex;
       
     }
  }

Attempting a solution, I made the following changes:

ngAfterViewInit(): void {
    setTimeout(() => {
      if (this.dataSource) {
        this.dataSource.sort = this.sort;
          this.paginator.pageIndex = this.page.pageIndex;
          this.paginator.pageSize = this.page.pageSize;
          this.paginator.length = this.pageLength;
          this.paginator._changePageSize(this.paginator.pageSize);
          this.dataSource.paginator = this.paginator;
         
      }
    });
  }

I am seeking guidance on how to properly adjust the page range label and next/previous buttons.

angular typescript angular-material angular-material-table mat-pagination

Answer 1

Answer №1

It seems that the issue here lies in the synchronization between the paginator and the current page index along with the page size.

To resolve this problem, you will need to make some adjustments to your code:

For instance:

import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import { ApiService } from './api.service';  // Customize this import according to your API service

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit, AfterViewInit {
  @ViewChild(MatPaginator) paginator!: MatPaginator;
  dataSource = new MatTableDataSource<any>([]);
  pageSizeOptions = [8, 16, 24];  // Specify your preferred page size options
  page = {
    pageIndex: 0,
    pageSize: 8
  };
  totalItems = 15;  // Total count of items in your dataset

  constructor(private apiService: ApiService) {  // Inject your specific API service
    // Fetch and set the current page index and page size
    const savedPageIndex = localStorage.getItem('currentPageIndex');
    const savedPageSize = localStorage.getItem('currentPageSize');
    if (savedPageIndex) {
      this.page.pageIndex = +savedPageIndex;
    }
    if (savedPageSize) {
      this.page.pageSize = +savedPageSize;
    }
  }

  ngOnInit(): void {
    // Retrieve initial data
    this.fetchData(this.page.pageIndex, this.page.pageSize);
  }

  ngAfterViewInit(): void {
    let isPaginatorInitialized = false;
    while (!isPaginatorInitialized) {
      if (this.paginator) {
        this.paginator.pageIndex = this.page.pageIndex;
        this.paginator.pageSize = this.page.pageSize;
        this.paginator.length = this.totalItems;
        this.dataSource.paginator = this.paginator;
        isPaginatorInitialized = true;
      }
    }

    this.paginator.page.subscribe(event => {
      this.pageChange(event);
    });
  }

  fetchData(pageIndex: number, pageSize: number): void {
    // Implement your API call here to fetch data based on pageIndex and pageSize
    this.apiService.getData(pageIndex, pageSize).subscribe(data => {
      this.dataSource.data = data.items;
      
      // Update paginator length along with pageIndex
      this.paginator.length = this.totalItems;
      this.paginator.pageIndex = pageIndex;
      this.paginator.pageSize = pageSize;
    });
  }

  pageChange(event: any): void {
    this.page.pageIndex = event.pageIndex;
    this.page.pageSize = event.pageSize;

    // Store the current page index and size into localStorage
    localStorage.setItem('currentPageIndex', this.page.pageIndex.toString());
    localStorage.setItem('currentPageSize', this.page.pageSize.toString());

    // Retrieve fresh data based on the existing page index and size
    this.fetchData(this.page.pageIndex, this.page.pageSize);
  }
}

Answer 2

It seems that the issue here lies in the synchronization between the paginator and the current page index along with the page size.

To resolve this problem, you will need to make some adjustments to your code:

For instance:

import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import { ApiService } from './api.service';  // Customize this import according to your API service

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit, AfterViewInit {
  @ViewChild(MatPaginator) paginator!: MatPaginator;
  dataSource = new MatTableDataSource<any>([]);
  pageSizeOptions = [8, 16, 24];  // Specify your preferred page size options
  page = {
    pageIndex: 0,
    pageSize: 8
  };
  totalItems = 15;  // Total count of items in your dataset

  constructor(private apiService: ApiService) {  // Inject your specific API service
    // Fetch and set the current page index and page size
    const savedPageIndex = localStorage.getItem('currentPageIndex');
    const savedPageSize = localStorage.getItem('currentPageSize');
    if (savedPageIndex) {
      this.page.pageIndex = +savedPageIndex;
    }
    if (savedPageSize) {
      this.page.pageSize = +savedPageSize;
    }
  }

  ngOnInit(): void {
    // Retrieve initial data
    this.fetchData(this.page.pageIndex, this.page.pageSize);
  }

  ngAfterViewInit(): void {
    let isPaginatorInitialized = false;
    while (!isPaginatorInitialized) {
      if (this.paginator) {
        this.paginator.pageIndex = this.page.pageIndex;
        this.paginator.pageSize = this.page.pageSize;
        this.paginator.length = this.totalItems;
        this.dataSource.paginator = this.paginator;
        isPaginatorInitialized = true;
      }
    }

    this.paginator.page.subscribe(event => {
      this.pageChange(event);
    });
  }

  fetchData(pageIndex: number, pageSize: number): void {
    // Implement your API call here to fetch data based on pageIndex and pageSize
    this.apiService.getData(pageIndex, pageSize).subscribe(data => {
      this.dataSource.data = data.items;
      
      // Update paginator length along with pageIndex
      this.paginator.length = this.totalItems;
      this.paginator.pageIndex = pageIndex;
      this.paginator.pageSize = pageSize;
    });
  }

  pageChange(event: any): void {
    this.page.pageIndex = event.pageIndex;
    this.page.pageSize = event.pageSize;

    // Store the current page index and size into localStorage
    localStorage.setItem('currentPageIndex', this.page.pageIndex.toString());
    localStorage.setItem('currentPageSize', this.page.pageSize.toString());

    // Retrieve fresh data based on the existing page index and size
    this.fetchData(this.page.pageIndex, this.page.pageSize);
  }
}

Tips for retaining mat table paginator on the chosen page even after refreshing the page

Answer №1

Similar questions

Extract a selection from a dropdown menu in ReactJS

Showing the child component as undefined in the view

Utilizing TypeScript to define and implement interfaces and declarations for powerful customization

Utilizing Typescript to pass props to a material-ui button enclosed in styled-components

Is there a way to order the execution of two functions that each produce promises?

Generating dynamic rows and columns with Angular and Bootstrap in real time

In Typescript, inheritance of classes with differing constructor signatures is not permitted

Disabling eslint does not prevent errors from occurring for the unicorn/filename-case rule

Error: Class cannot be loaded by React Webpack loader

Generate a Jest dummy for testing an IncomingMessage object

Angular, Transforming JSON with RxJS Operators in TypeScript

Invoking method in Angular component upon receiving a notification via ActionCable

Expanding the capabilities of i18next's translation function

What is the best way to divide an HTML table into two sections?

Conditional void parameter type in Typescript

"Displaying the Material Input TextBox in a striking red color when an error occurs during

Tips for safely storing JWT in the browser

Preparing JSON data for use with chart.js leveraging Angular 4 observables

Ensuring Consistency of Values Between Child and Parent Components

Include a hash in the URL when the current location is entered into the view by scrolling