Angular creazione di tabella paginata con TypeScript

Si riporta l'articolo scritto per il sito https://www.iprogrammatori.it/articoli/javascript/art_angular-creazione-di-tabella-paginata-con-typescri_1876.aspx

In questo articolo vedremo come realizzare una semplice tabella html, ma con la paginazione dei dati.

Nella gestione dei dati, spesso si ha la necessità di raggruppare i dati in pagine, in modo da visualizzare di volta in volta i risultati da una fonte dati.

La tecnica della paginazione torna utile anche nel visualizzare in maniera ottimale ed elegante il risultato dell’estrazione dei dati, qualora questi sono tanti e di difficile lettura in una sola pagina.

In questo articolo vedremo come usare il linguaggio TypeScript e la tecnologia Angular per visualizzare i dati da un array (ma possono essere estrapolati anche da una fonte dati o altro) in maniera paginata.

Il tutto sarà come mostrato in figura 1.

Figura 1 - La tabella paginata

Creazione del progetto

Si crea un nuovo progetto di Angular, va benissimo qualsiasi versione, in quanto la paginazione avviene con il linguaggio base di TypeScript e gli standard della tecnologia Angular.

Dopo aver creato il progetto, si crea una nuova classe, che potremmo chiamare “Nominativi”, tramite la voce di menu Nuova classe oppure tramite il seguente comando dal prompt.

ng generate class Nominativi

oppure in forma abbreviata tramite il seguente comando.

ng g cl Nominativi.

Stesura del codice

Terminata la creazione del progetto e della classe non resta che scrivere il codice per realizzare il nostro applicativo e soprattutto applicare la tecnica della paginazione.

La classe sarà utilizzata come model, o meglio per rappresentare i dati, avremo una serie di record con due colonne, quali nome e cognome, che sono rappresentate dalle proprietà della classe.

Di seguito si riporta il codice completo della classe denominata “Nominativi”, in TypeScript.

TypeScript:

export class Nominativi{

 

  public Nome: string;

  public Cognome: string;

  public constructor(nome: string, cognome: string  ) {

 

    this.Nome = nome;

    this.Cognome = cognome;

 

  }

 

}

 

Ora non resta che modificare il file della nostra pagina, utilizzeremo la prima pagina html che viene creata quando si crea un nuovo progetto, quella che di default viene generata con il nome “app.component” .

Si creano due oggetti di tipo array nominativi, che avranno il compito di contenere i dati, un oggetto che conterrà sempre i dati completi, mentre un altro oggetto (denominato dati) conterrà solo quelli di paginazione.

A questi due oggetti, si creano due variabili di tipo numerico, che avranno il compito di visualizzare gli elementi per pagina (denominata elementiPerPagina) con il valore impostato a 10, ed una variabile indicante l’indice della pagina (denominata indicePagina).

Di seguito si riporta il frammento di codice delle suddette operazioni.

TypeScript:

export class AppComponent implements OnInit {

 arrayNominativi: Nominativi[] = [];

 public Dati : Nominativi[] = [];

 indicePagina: number = 1;

 elementiPerPagina: number = 10;

 

 }

 

 

 

Nell’evento di apertura pagina (NgInit) dobbiamo valorizzare le due variabili di tipo array nominativi con una fonte dati, per simulare tale gestione, faremo un ciclo for degli stessi elementi ripetuto per 40 volte.

Di seguito si riporta il frammento di codice completo delle suddette operazioni.

TypeScript:

ngOnInit(): void {

 

   this.arrayNominativi.push( new Nominativi("Emanuele", "Mattei"));

   this.arrayNominativi.push( new Nominativi("Emanuele", "Mattei"));

    for (let Contatore = 1; Contatore < 40; Contatore++) {

      this.arrayNominativi.push( new Nominativi("Emanuele" + Contatore, "Mattei" + Contatore));

      this.arrayNominativi.push( new Nominativi("Luigi"+ Contatore, "Cristaldi"+ Contatore));

 

    }

 

    this.Dati = this.arrayNominativi.slice(0,10);

 

 

  }

 

La simulazione del caricamento dati da una fonte dati, è terminato, ora occorre creare le funzioni, che verranno eseguite quando si fa click sui vari pulsanti.

In particolare, avremo 4 pulsante, ed ognuno tramite l’evento click richiamerà una determinata funzione. I pulsanti sono inizio, che visualizzerà i dati relativi all’inizio, pulsante di fine, che visualizzerà gli ultimi dati della lista, ed il pulsante indietro che visualizzerà i dati precedenti) ed un pulsante avanti, che visualizzerà i successivi record.

Di seguito si riporta il frammento di codice per le operazioni di spostamento.

TypeScript:

public Inizio():void{

 

  this.Dati = this.arrayNominativi.slice(0,10);

  this.indicePagina = 1;

}

 

public Indietro():void{

 

  if(this.indicePagina==0)

    return;

 

  this.Dati = this.arrayNominativi.slice((this.indicePagina-1)*this.elementiPerPagina, this.indicePagina * this.elementiPerPagina);

 

  this.indicePagina -= 1;

 

}

 

public Avanti():void{

  if((this.arrayNominativi.length / this.elementiPerPagina) == this.indicePagina)

    return;

  this.indicePagina += 1;

  this.Dati = this.arrayNominativi.slice((this.indicePagina-1)*this.elementiPerPagina, this.indicePagina * this.elementiPerPagina);

 

}

 

public Fine():void{

 

  this.Dati = this.arrayNominativi.slice(this.arrayNominativi.length-10,this.arrayNominativi.length);

 this.indicePagina = this.arrayNominativi.length / this.elementiPerPagina -1;

}

 

Ora dobbiamo creare una tabella html, che visualizzerà a video i dati paginati.

Il codice html è quello di una tabella normale, con quattro pulsanti, e verranno visualizzati i dati relativo all’oggetto di tipo Arrary denominato in precedenza “Dati”.

Di seguito si riporta il frammento di codice della pagina HTML.

HTML

<table>

  <thead>

    <tr>

      <th style="color: green; width: 200px; text-align: center;">Nome</th>

      <th style="color: green; width: 200px; text-align: center;">Cognome</th>

    </tr>

 

  </thead>

 <tbody>

  <tr *ngFor="let elemento of Dati">

    <td style="width: 100px;  text-align: center;">{{elemento.Nome}}</td>

    <td style="width: 100px;  text-align: center;">{{elemento.Cognome}}</td>

  </tr>

<br><br>

<tr  >

  <td  style="height: 30px; width: 100px; text-align: center;"><button (click)="Inizio();" ><<</button> <button (click)="Indietro();"  ><</button> </td>

  <td style="height: 30px; width: 100px; text-align: center;"><button (click)="Avanti();"  >></button> <button (click)="Fine();"  >>></button></td>

 

</tr>

 </tbody>

 

</table>

 

 

Per ogni evento di un pulsante, verrà eseguito una determinata funzione, un pulsante che porta all’inizio, uno che visualizza i dati precedenti, un altro successivo ed in fine gli ultimi dati dell’oggetto array.

Conclusioni

L’articolo ha voluto fornire al lettore le basi di una tecnica di paginazione dei dati. Tecnica che può divenire utile qualora si ha la necessità di visualizzare i dati in maniera ordinata e non tutti in visualizzazione, comportando anche problemi di lettura.

Ricordiamo che sono presenti vari framework, tra cui Material, di cui sono dotati di controlli (per esempio table) che permettono di visualizzare i dati in maniera paginata.