Hvordan bruke paginering på HTML -tabeller ved hjelp av JavaScript

Paginering legges til tabeller for å forbedre brukeropplevelsen ved å dele opp en stor mengde data i mindre, mer håndterbare biter. Det lar brukere enkelt navigere gjennom dataene ved å se en side om gangen i stedet for å måtte bla gjennom en overveldende mengde informasjon. I tillegg kan paginering bidra til å forbedre ytelsen ved å redusere datamengden som må lastes på en gang.

Dette innlegget vil definere prosessen for å bruke paginering på HTML -tabeller ved hjelp av JavaScript.

Hvordan bruke paginering på HTML -tabeller ved hjelp av JavaScript?

I paginering er innholdet delt inn i små biter for å vises på de forskjellige sidene ved å klikke på knappene som navigerer på sidene.

Eksempel

La oss se det gitte eksemplet for å forstå prosessen med å lage paginering på HTML -tabeller i JavaScript. Det vil ta to trinn:

• Lag en tabell i en HTML -fil
• Sett paginering i JavaScript -filen

Trinn 1: Legg til tabellen i HTML -fil

Først må du lage en tabell i en HTML -fil, ved hjelp av "

" stikkord:

Navn	Alder	Sammenføyningsdato	Betegnelse
Mary	28	16May2022	Hr
Steven	29	18May2020	Assistent
John	32	15 MARCH2017	Regnskapsfører
Covin	25	14APRIL2019	Mto
Kain	27	5SEP2019	Assistent
Marco	23	21Jan2018	Kontoer
Rhonda	24	3Jan2020	Hr
Peale	30	25MARCH2018	Hr
Dan	21	9.July2021	Assistent
Susan	28	28nov2022	Mto
Formidling	29	6July2021	Kontoer

Trinn 2: Sett paginering av tabellen i JavaScript

I JavaScript -filen, bruk pagineringsprosessen på tabellen. For å gjøre det, først vil vi få bordelementet ved å bruke "getElementById ()”Metode:

var tabell = dokument.getElementById ("Empinfo");

Angi antall rader med tabell som skal vises per side:

var RowsPerpage = 5;

Få det totale antallet rader på tabellen ved å bruke “lengde”Eiendom og lagre den i en variabel”ROWCOUNT”:

var rowcount = tabell.rader.lengde;

Få tagnavnet på den første cellen i tabellen i første rad og sjekk om tabellen har en hodestrøm som vil returnere en boolsk verdi:

var tabellhead = tabell.Rader [0].FørstelementChild.tagname === "th";

Lag en matrise for å holde hver rad på tabellen for å vises på sidene:

var tr = [];

La oss lage en loop -teller for å starte tellingen fra 2. rad i tabellen:

var I, II, J = (Tablehead) ? 1: 0;

Lag en variabel “th”Det holder den første raden i tabellen som er bordhode Bruker den ternære operatøren:

var th = (tabellhead ? bord.Rader [(0)].ytrehtml: "");

Nå, ring matematikken.Ceil () Metode for å telle antall sider ved å dele de totale radene på en tabell etter antall rader som skal vises per side:

var pagecount = matematikk.Ceil (bord.rader.lengde / rowsperpage);

Sjekk sidetellingen og sett innholdet på sidene:

if (pagecount> 1)
for (i = j, ii = 0; i < rowCount; i++, ii++)
tr [ii] = tabell.rader [i].ytrehtml;

bord.INSERTADJACENTHTML ("etterfølgende", "
sorter (1);

I ovennevnte kode:

• Itererer tabellen med "til”Løkke og tilordne hver rad inkludert tagnavnet med innholdet til matrisen.
• Lag en ny div som holder knappene.
• Ring "sortere()”Funksjon ved å bestå 1, som indikerer at standardsiden vil være den første siden.

Angi innholdet på siden ved å opprette sider mens du klikker på brukerens knapp. Å gjøre slik:

• Først vil vi definere en funksjon som heter “sortere()”Det vil ta en side som en parameter når brukeren klikker på den spesifiserte knappen.
• Deretter vises rader på siden ved å vise den første raden som en permanent, det vil si tabellhode (er).
• Til slutt, lag pagineringsknappene ved å ringe “PageButtons ()”Funksjon:

funksjonsort (side)
var rader = th, s = ((RowsPerpage * side)- rowsperpage);
for (i = s; i < (s + rowsPerPage) && i < tr.length; i++)
rader += tr [i];
bord.indrehtml = rader;
dokument.getElementById ("Knapper").indrehtml = PageButtons (PageCount, side);

Lag nå knapper "tidligere”Og“NESTE”Knapper med pagineringsknapper basert på sidetellingen:

funksjon PageButtons (PageCount, Current)
var prevButton = (Current == 1)? "funksjonshemmet" : "";
var NextButton = (Current == PageCount)? "funksjonshemmet" : "";
var knapper = "for (i = 1; i <= pageCount; i++)
knapper += "";

knapper += "'onClick =' sorter (" +(gjeldende +1) +") '" +nextButton +">";
Returknapper;

Her kan du se hver side viser et unikt innhold ved å klikke på knappene:

Det handler om paginasjonen på HTML -tabellene i JavaScript.

Konklusjon

For å bruke paginering på HTML -tabellene, oppretter du først en tabell i en HTML -fil og oppretter deretter paginering i en JavaScript -fil ved å lage en matrise som lagrer radene, angir antall rader som skal vises per side, lag en løkke -teller for å starte Tell fra 2. rad på tabellen for å vise rader på sidene. Sett bordhodet som en permanent rad på hver side og last andre rader på sidene basert på tellingen. Dette innlegget definerte prosessen for å bruke paginering på HTML -tabeller ved hjelp av JavaScript.