Búsqueda de sitios web

angular - Paginación de Clarity - salida de clr-dg-page-size

Estoy escribiendo una aplicación en Angular 8 con Clarity.

Uso datagrid con paginación. Necesito obtener datos después de cambiar los elementos por página, pero no hay ninguna salida de los componentes de Clarity. Solo hay salida al cambiar de páginas.

Hay algo de HTML:

<clr-dg-footer>
    <clr-dg-pagination #pagination [clrDgPageSize]="itemsPerPage" [clrDgTotalItems]="totalElements" [clrDgLastPage]="totalPages"
    (clrDgPageChange)="onChangePage($event)">
      <clr-dg-page-size [clrPageSizeOptions]="[5,20,50,100]" (change)="onItemsPerPageChange($event)">Samochodów na stronę</clr-dg-page-size>
      {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
      z {{pagination.totalItems}} samochodów
    </clr-dg-pagination>
  </clr-dg-footer>

Y así es como lo estoy haciendo ahora:

onItemsPerPageChange(event) {
    let newValue = +event.target.value.slice(3);
    if(this.itemsPerPage !== newValue) {
      this.itemsPerPage = newValue;
      this.fetchCars();
    }
  }

Funciona, pero sé que es una manera terrible de hacer esto.

¿Sabes cómo hacerlo de la manera correcta? No tengo ninguna idea.

Respuesta #1

Creo que la forma común con el datagrid de Clarity es usar ClrDatagridStateInterface junto con el enlace (clrDgRefresh) dentro de la plantilla del datagrid.

Echa un vistazo a la API de datagrid impulsada por el servidor de Clarity o a este Stackblitz clarity-dg-server-driven.

En su componente puede hacer uso de ClrDatagridStateInterface

class MyComponent {
    users: User[];
    total: number;
    loading: boolean = true;

    refresh(state: ClrDatagridStateInterface) {
        this.loading = true;
        ...
        this.inventory.filter(filters)
            .sort(<{by: string, reverse: boolean}>state.sort)
            .fetch(state.page.from, state.page.size)
            .then((result: FetchResult) => {
                this.users = result.users;
                this.total = result.length;
                this.loading = false;
            });
    }

Y en tu plantilla tienes que vincular (clrDgRefresh) a tu método refresh:

<clr-datagrid (clrDgRefresh)="refresh($event)" [clrDgLoading]="loading">
    <clr-dg-column>User ID</clr-dg-column>
    <clr-dg-column [clrDgField]="'name'">Name</clr-dg-column>
    <clr-dg-column [clrDgField]="'creation'">Creation date</clr-dg-column>
    <clr-dg-column [clrDgField]="'pokemon'">Pokemon</clr-dg-column>
    <clr-dg-column [clrDgField]="'color'">Favorite color</clr-dg-column>

    <clr-dg-row *ngFor="let user of users">
        <clr-dg-cell>{{user.id}}</clr-dg-cell>
        <clr-dg-cell>{{user.name}}</clr-dg-cell>
        <clr-dg-cell>{{user.creation | date}}</clr-dg-cell>
        <clr-dg-cell>{{user.pokemon.name}}</clr-dg-cell>
        <clr-dg-cell>
            <span class="color-square" [style.backgroundColor]="user.color"></span>
        </clr-dg-cell>
    </clr-dg-row>

    <clr-dg-footer>
        {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
        of {{total}} users
        <clr-dg-pagination #pagination [clrDgTotalItems]="total"></clr-dg-pagination>
    </clr-dg-footer>
</clr-datagrid>

Aquí puedes encontrar las fuentes del ejemplo basado en servidor de Claritys.

Artículos relacionados