Vyhledávání na webu

javascript - Jak posunout na konkrétní řádek na konkrétní stránce pomocí tabulky Angular Material

Používám Angular Material k zobrazení dat v tabulce s stránkováním, když uživatel klikne na řádek, přesměruji ho na jinou stránku, a pokud chce jít zpět na stránku tabulky, klikne na tlačítko.

Můj problém je, že uživatel musí jít zpět na stránku tabulky a posunout se na konkrétní řádek, já to dělám takto

document.getElementById(elementId).scrollIntoView()

ale pokud řádek, na který bylo kliknuto, není na první stránce, prvek není nalezen, jak mohu přejít na stránku, kde řádek existuje?

A druhý problém je, že uživatel může filtrovat tabulku a poté vybrat konkrétní řádek. Pokud uložím číslo stránky, když se vrátí na stránku tabulky, data se zobrazí bez filtru a číslo stránky nebude správné.

Odpověď č. 1

musíte uložit informace o pageIndex, když přecházíte na jinou stránku, protože když se vrátíte k vaší datové tabulce, musíte toto číslo indexu předat do [pageIndex]. Například:

<mat-paginator [length]="length"
          [pageSize]="pageSize"
          [pageSizeOptions]="pageSizeOptions"
          (page)="pageEvent = $event"
          [pageIndex]="pIndex">
</mat-paginator>

tady pIndex je proměnná, kterou definuji ve své Komponentě. pokud je vaše pageSize 10 a pageIndex je 0, pak to ukáže řádky 1 až 10...

Pro více informací: https://stackblitz.com/angular/ngdejmepgbr?file=app%2Fpaginator-configurable-example.html

Odpověď č. 2

Musíte propojit stránkovač s routerem Angularu.

Například řekněme, že jste strukturovali svou cestu trasy takto:

http://my/url/to/table/component?page=2

V tomto případě můžete získat index stránky 2 z URL tabulky takto:

Třída komponenty:

class MyComponent {

  pageIndex = this.activatedRoute.queryParams.pipe(
    map(params => params['page'])
  );

  constructor(activatedRoute: ActivatedRoute) {}
}

Šablona :

<mat-paginator [pageIndex]="pageIndex | async"></mat-paginator>

Zatím bude tabulku řídit URL. Nyní je také potřeba aktualizovat URL, když uživatel prochází tabulku pomocí stránkovače:

Šablona :

<mat-paginator [pageIndex]="pageIndex | async" (page)="pageChange($event)"></mat-paginator>

Třída komponenty:

class MyComponent {

  pageIndex = this.activatedRoute.queryParams.pipe(
    map(params => params['page'])
  )

  constructor(activatedRoute: ActivatedRoute, router: Router) {}

  pageChange(e: PageEvent): void {
    this.router.navigate( /* ... */ );
  }
}

Nyní, když se URL aktualizuje, jak uživatel prochází tabulkou, to umožňuje routeru řídit tabulku, když se uživatel vrátí na dříve navštívenou URL.

Související články