Come utilizzare la paginazione sulle tabelle HTML usando JavaScript

La paginazione viene aggiunta alle tabelle per migliorare l'esperienza dell'utente rompendo una grande quantità di dati in blocchi più piccoli e più gestibili. Consente agli utenti di navigare facilmente attraverso i dati visualizzando una pagina alla volta piuttosto che dover scorrere una quantità schiacciante di informazioni. Inoltre, la paginazione può aiutare a migliorare le prestazioni riducendo la quantità di dati che devono essere caricati contemporaneamente.

Questo post definirà il processo per utilizzare la paginazione sulle tabelle HTML usando JavaScript.

Come utilizzare la paginazione sulle tabelle HTML usando JavaScript?

In paginazione, il contenuto è diviso in piccoli blocchi da visualizzare nelle diverse pagine facendo clic sui pulsanti che navigano nelle pagine.

Esempio

Vediamo l'esempio dato per comprendere il processo di creazione di impaginazione sulle tabelle HTML in JavaScript. Ci vorranno due passi:

• Crea una tabella in un file HTML
• Imposta la paginazione nel file JavaScript

Passaggio 1: aggiungi la tabella nel file HTML

Innanzitutto, crea una tabella in un file HTML, usando "

"Tag:

Nome	Età	Data di iscrizione	Designazione
Maria	28	16 maggio2022	Hr
Steven	29	18 maggio2020	Assistente
John	32	15 marzo2017	Contabile
Covin	25	14april2019	MTO
Caino	27	5SEP2019	Assistente
Marco	23	21Jan2018	Account
Rhonda	24	3Jan2020	Hr
Peale	30	25March2018	Hr
Dan	21	9 luglio2021	Assistente
Susan	28	28NOV2022	MTO
Covey	29	6 luglio2021	Account

Passaggio 2: imposta la paginazione della tabella in JavaScript

Ora, nel file JavaScript, applica il processo di paginazione sulla tabella. Per farlo, prima, otterremo l'elemento del tavolo usando "getElementById ()" metodo:

VAR TABLE = Documento.getElementById ("empinfo");

Impostare il numero di righe della tabella per visualizzare per pagina:

var rowsperpage = 5;

Ottieni il numero totale di righe della tabella usando il "lunghezza"Proprietà e archiviarla in una variabile"ROWCOUNT":

var rowcount = table.file.lunghezza;

Ottieni il nome del tag della prima cella della tabella nella prima riga e verifica se la tabella ha una riga di testa che restituirà un valore booleano:

var tablehead = table.righe [0].FirstElementChild.tagname === "th";

Crea un array per tenere ogni riga della tabella da visualizzare sulle pagine:

var tr = [];

Creiamo un contatore a loop per l'avvio del conteggio dalla seconda riga della tabella:

var i, ii, j = (tablehead) ? 1: 0;

Crea una variabile "th"Ciò contiene la prima riga della tabella che è la testa del tavolo Utilizzando l'operatore ternario:

var th = (tablehead ? tavolo.righe [(0)].esterhtml: "");

Ora, chiama la matematica.Metodo Ceil () per contare il numero di pagine dividendo le righe totali di una tabella per numero di righe da visualizzare per pagina:

var pagecount = matematica.CEIL (Tabella.file.lunghezza / rowsperpage);

Controlla il conteggio delle pagine e imposta il contenuto sulle pagine:

if (pageCount> 1)
per (i = j, ii = 0; i < rowCount; i++, ii++)
Tr [ii] = tabella.righe [i].esterhtml;

tavolo.insertAdjacenthtml ("Afterend", "
Ordina (1);

Nel codice seguente sopra:

• Itera il tavolo usando "per"Loop e assegna ogni riga incluso il suo nome di tag con il suo contenuto all'array.
• Crea un nuovo div che contiene i pulsanti.
• Chiama il "ordinare()"Funzione passando 1, che indica che la pagina predefinita sarà la prima pagina.

Imposta il contenuto nella pagina creando pagine facendo clic sul pulsante dell'utente. Fare così:

• Innanzitutto, definiremo una funzione chiamata "ordinare()"Ciò prenderà una pagina come parametro quando l'utente fa clic sul pulsante specificato.
• Quindi, le righe verranno visualizzate nella pagina visualizzando la prima riga come permanente, ovvero la testa della tabella / i.
• Infine, crea i pulsanti di impaginazione chiamando "PageButtons ()" funzione:

functionsort (pagina)
var rows = th, s = ((rowsperpage * pagina)- rowsperpage);
per (i = s; i < (s + rowsPerPage) && i < tr.length; i++)
ROWS += TR [i];
tavolo.InnerHtml = righe;
documento.getElementById ("pulsanti").InnerHtml = PageButtons (PageCount, Page);

Ora, crea pulsanti "precedente" E "Prossimo"Pulsanti con impaginazione in base ai conteggi della pagina:

Funzione PageButtons (PageCount, Current)
var prevButton = (corrente == 1)? "Disabilitato" : "";
var nextButton = (corrente == PageCount)? "Disabilitato" : "";
var bottons = "per (i = 1; i <= pageCount; i++)
pulsanti += "";

pulsanti += "'onClick =' Ordina ( +(corrente +1) +") " +NextButton +"> ";
Pulsanti di ritorno;

Qui, puoi vedere ogni pagina mostra un contenuto unico facendo clic sui pulsanti:

Riguarda la paginazione sulle tabelle HTML in JavaScript.

Conclusione

Per usare la paginazione sulle tabelle HTML, prima, crea una tabella in un file HTML e quindi crea una paginazione in un file JavaScript creando un array che memorizza le righe, imposta il numero di righe da visualizzare per pagina, crea un contatore Loop per avviare Contare dalla seconda riga della tabella per la visualizzazione di righe sulle pagine. Impostare la testa della tabella come riga permanente su ogni pagina e caricare altre righe sulle pagine in base al conteggio. Questo post ha definito il processo per utilizzare la paginazione sulle tabelle HTML usando JavaScript.