Paginare un Array di Oggetti In Javascript

Paginare Array Oggetti Javascript

In questo mini articolo ti mostro cosa ho utilizzato per paginare un array di oggetti in Javascript.

Come avrai notato dal titolo parliamo di Array in Javascript, ma naturalmente capito il concetto, è possibile replicare la cosa anche in altri linguaggi.

Ti è mai capitato di avere a che fare con una lista di oggetti così lunga da necessitare la paginazione, ma non così tanto lunga da dover interessare il server di back-end?

A me si! Ed in ogni caso, data ormai la grande capacità di calcolo dei moderni browser, se posso far lavorare il client piuttosto che il server, sono più felice 😂

In breve

Ho utilizzato una funzione che accetta come parametri: l’array da paginare, il numero della pagina corrente ed il numero di elementi per pagina che desidero ottenere. Questi due parametri sono opzionali e se non passati sono impostati di default a 1 per la pagina corrente e a 10 per il numero di elementi per pagina.

La funzione in output non fornirà soltanto la porzione di elementi paginati, ma un oggetto contenente, oltre agli elementi desiderati, anche una serie di informazioni utili alla navigazione dell’array.

Funzione per Paginare un Array di Oggetti In Javascript

function paginatore(elementi, paginaCorrente, elementiPerPagina){
  //se non specificato considero di essere alla pagina numero 1
  let pagina = paginaCorrente || 1;
  //se non specificato dico che voglio 10 elmenti per pagina
  let perPagina = elementiPerPagina || 10;
  //calcolo l'offset di spostamento della "finestra" di elementi che voglio restituire
  let offset = (pagina - 1) * perPagina;
  //estraggo la porzione di oggetti che mi interessa
  let elementiPaginati = elementi.slice(offset).slice(0, perPagina);
  //Calcolo il numero totale di pagine
  let pagineTotali = Math.ceil(elementi.length / perPagina);

  /*
    Restituisco un oggetto contenente la porzione paginata e tutte le informazioni necessarie alla navigazione
  */
  return {
    paginaCorrente: pagina,
    perPagina: perPagina,
    paginaPrecedente: pagina - 1 ? pagina - 1 : null,
    paginaSuccessiva: pagineTotali > pagina ? pagina + 1 : null,
    totali: elementi.length,
    pagineTotali: pagineTotali,
    elementiPaginati: elementiPaginati
  };
};

Qui sotto ho realizzato una demo (molto spartana) che mostra il comportamento della funzione.
Per una migliore visualizzazione ti consiglio di aprirla in una nuova pagina.

La funzione che ti ho mostrato in questo articolo si rifà ad un vecchio articolo del blog di Arjun. Io l’ho semplicemente tradotta e commentata per rendere più chiaro il funzionamento a chi non mastica molto di inglese o javascript.

Ho usato questa funzione in un progetto React che sto sviluppando e ho intenzione di sfruttarla per creare un componente custom per paginare elegantemente una grossa lista basata sul framework Material-UI.

Stay tuned!

Potrebbero interessarti anche...