Como usar a paginação em tabelas HTML usando JavaScript

A paginação é adicionada às tabelas para melhorar a experiência do usuário, dividindo uma grande quantidade de dados em pedaços menores e mais gerenciáveis. Ele permite que os usuários naveguem facilmente pelos dados, visualizando uma página de cada vez, em vez de ter que rolar por uma quantidade esmagadora de informações. Além disso, a paginação pode ajudar a melhorar o desempenho, reduzindo a quantidade de dados que precisam ser carregados de uma só vez.

Esta postagem definirá o processo para usar a paginação em tabelas HTML usando JavaScript.

Como usar a paginação em tabelas HTML usando JavaScript?

Na paginação, o conteúdo é dividido em pequenos pedaços para exibir nas diferentes páginas clicando nos botões que navegam nas páginas.

Exemplo

Vamos ver o exemplo dado para entender o processo de criação de paginação em tabelas HTML em JavaScript. Vai levar dois passos:

• Crie uma tabela em um arquivo HTML
• Defina a paginação no arquivo JavaScript

Etapa 1: adicione a tabela no arquivo html

Primeiro, crie uma tabela em um arquivo HTML, usando o “

" marcação:

Nome	Idade	Data de ingresso	Designação
Mary	28	16May2022	Hr
Steven	29	18MAY2020	Assistente
John	32	15 de march2017	Contador
Covin	25	14April2019	MTO
Caim	27	5SEP2019	Assistente
Marco	23	21Jan2018	Contas
Rhonda	24	3JAN2020	Hr
Peale	30	25 de março de 2018	Hr
Dan	21	9 de junho de 211	Assistente
Susan	28	28Nov2022	MTO
Covey	29	6 de junho2021	Contas

Etapa 2: Defina a paginação da tabela em JavaScript

Agora, no arquivo JavaScript, aplique o processo de paginação na tabela. Para fazer isso, primeiro, obteremos o elemento da tabela usando o “getElementById ()”Método:

tabela var = documento.getElementById ("empinfo");

Defina o número de linhas da tabela a ser exibida por página:

var lOBLEPPAGE = 5;

Obtenha o número total de linhas da tabela usando o “comprimento”Propriedade e armazene -a em uma variável“Contagem de linhas”:

var rowCount = tabela.linhas.comprimento;

Obtenha o nome da tag da primeira célula da tabela na primeira linha e verifique se a tabela tem uma linha principal que retornará um valor booleano:

var tablehead = tabela.linhas [0].FirstElementChild.tagname === "th";

Crie uma matriz para segurar cada linha da tabela para exibir nas páginas:

var tr = [];

Vamos criar um contador de loop para iniciar a contagem da 2ª linha da tabela:

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

Crie uma variável “º”Isso segura a primeira linha da tabela que é a cabeça da tabela Usando o operador ternário:

var th = (Tablehead ? mesa.linhas [(0)].OuterHtml: "");

Agora, ligue para a matemática.Método Ceil () para contar o número de páginas dividindo o total de linhas de uma tabela por número de linhas a serem exibidas por página:

var pageCount = matemática.teto (tabela.linhas.comprimento / linhas);

Verifique a contagem de páginas e defina o conteúdo nas páginas:

if (pageCount> 1)
para (i = j, ii = 0; i < rowCount; i++, ii++)
tr [ii] = tabela.linhas [i].externo;

mesa.insertadjacenthtml ("Afterend", "
classificar (1);

No código seguinte acima:

• Itera a tabela usando “para”Faça um loop e atribua todas as linhas, incluindo seu nome de tag com seu conteúdo para a matriz.
• Crie uma nova div que segure os botões.
• Ligar para "organizar()”Função por Passagem 1, que indica que a página padrão será a primeira página.

Defina o conteúdo na página criando páginas enquanto clica no botão do usuário. Fazer isso:

• Primeiro, definiremos uma função chamada “organizar()”Isso levará uma página como um parâmetro quando o usuário clicar no botão especificado.
• Em seguida, as linhas serão exibidas na página exibindo a primeira linha como permanente, ou seja, cabeça (s) de tabela (s).
• Finalmente, crie os botões de paginação chamando o “PageButtons ()”Função:

Funções (página)
var linhas = th, s = ((lobra * página)- rowsperpage);
para (i = s; i < (s + rowsPerPage) && i < tr.length; i++)
linhas += tr [i];
mesa.inerhtml = linhas;
documento.getElementById ("botões").INNERHTML = PageButtons (PageCount, Page);

Agora, crie botões “anterior" e "próximo”Botões com botões de paginação com base na contagem de páginas:

Função PageButtons (PageCount, Current)
var prevButton = (atual == 1)? "desabilitado" : "";
var nextButton = (Current == PageCount)? "desabilitado" : "";
vartons var = "para (i = 1; i <= pageCount; i++)
botões += "";

Botões += "'OnClick =' Sort (" +(Current +1) +") '" +NextButton +">";
botões de retorno;

Aqui, você pode ver cada página mostra um conteúdo exclusivo clicando nos botões:

Isso é tudo sobre a paginação nas tabelas HTML em JavaScript.

Conclusão

Para usar a paginação nas tabelas HTML, primeiro, crie uma tabela em um arquivo HTML e, em seguida, crie a paginação em um arquivo JavaScript, criando uma matriz que armazena as linhas, defina o número de linhas para exibir por página, crie um contador de loop para iniciar Conte da 2ª linha da tabela para exibir linhas nas páginas. Defina a cabeça da tabela como uma linha permanente em todas as páginas e carregue outras linhas nas páginas com base na contagem. Este post definiu o processo para usar a paginação em tabelas HTML usando JavaScript.