Manipulação de Tabelas HTML com jQuery

Tempo de leitura: 4 minutos

Manipulação de Tabelas HTML com jQuery: Tabelas HTML são elementos fundamentais para exibir dados de forma organizada em aplicações web. No entanto, tabelas grandes e complexas podem ser difíceis de navegar e analisar. jQuery, com sua capacidade de manipulação do DOM e eventos, simplifica a adição de funcionalidades avançadas a tabelas HTML, como ordenação, filtragem e paginação.

Neste artigo, exploraremos como manipular tabelas HTML com jQuery, implementando essas funcionalidades para melhorar a experiência do usuário, sempre seguindo as melhores práticas e utilizando as versões mais recentes da biblioteca.

A Importância da Manipulação de Tabelas HTML

Tabelas HTML são amplamente utilizadas para exibir dados em aplicações web, desde listas de produtos e informações de usuários até relatórios e dashboards. No entanto, tabelas grandes e complexas podem ser difíceis de navegar e analisar, prejudicando a usabilidade da aplicação. jQuery oferece ferramentas poderosas para manipular tabelas HTML, permitindo que você adicione funcionalidades avançadas como ordenação, filtragem e paginação, tornando a navegação e a análise de dados mais fáceis e eficientes.

Manipulando Tabelas HTML com jQuery

1. Ordenação de Colunas:
   • Utilize jQuery para capturar eventos de clique nos cabeçalhos das colunas.
   • Utilize o método sort() para ordenar as linhas da tabela com base nos valores da coluna clicada.
   • Utilize atributos data-* para armazenar o tipo de dado da coluna (texto, número, data).
   • Exemplo:
     • <table>
<thead>
<tr>
<th data-tipo="texto">Nome</th>
<th data-tipo="numero">Idade</th>
<th data-tipo="data">Data</th>
</tr>
</thead>
<tbody>
<tr>
<td>João</td>
<td>25</td>
<td>2023-10-26</td>
</tr>
<tr>
<td>Maria</td>
<td>30</td>
<td>2023-10-25</td>
</tr>
<tr>
<td>Pedro</td>
<td>20</td>
<td>2023-10-27</td>
</tr>
</tbody>
</table>
     • $("th").on('click', () => {
var coluna = $(this).index();
var tipo = $(this).data("tipo");
var tabela = $(this).closest("table");
var linhas = tabela.find("tbody > tr").toArray().sort(comparar(coluna, tipo));
tabela.find("tbody").empty().append(linhas);
});

function comparar(coluna, tipo) {
return function(a, b) {
var valorA = $(a).find("td").eq(coluna).text();
var valorB = $(b).find("td").eq(coluna).text();
if (tipo === "numero") {
return valorA - valorB;
} else if (tipo === "data") {
return new Date(valorA) - new Date(valorB);
} else {
return valorA.localeCompare(valorB);
}
};
}
2. Filtragem de Dados:
   • Utilize um campo de entrada (<input>) para permitir que os usuários filtrem os dados da tabela.
   • Utilize jQuery para capturar eventos de digitação no campo de entrada.
   • Utilize o método filter() para ocultar as linhas da tabela que não correspondem ao critério de filtragem.
   • Exemplo:
     • <input type="text" id="filtro" placeholder="Filtrar...">
     • $("#filtro").on("input", () => {
var filtro = $(this).val().toLowerCase();
$("tbody > tr").filter(() => {
$(this).toggle($(this).text().toLowerCase().indexOf(filtro) > -1);
});
});
3. Paginação de Dados:
   • Divida os dados da tabela em páginas menores para facilitar a navegação.
   • Utilize jQuery para criar botões de navegação (anterior, próximo, páginas).
   • Utilize o método slice() para exibir apenas as linhas da página atual.
   • Exemplo:
     • var linhasPorPagina = 10;
var paginaAtual = 1;
var totalLinhas = $("tbody > tr").length;
var totalPaginas = Math.ceil(totalLinhas / linhasPorPagina);

function exibirPagina(pagina) {
var inicio = (pagina - 1) * linhasPorPagina;
var fim = inicio + linhasPorPagina;
$("tbody > tr").hide().slice(inicio, fim).show();
}

$("#anterior").on('click', () => {
if (paginaAtual > 1) {
paginaAtual--;
exibirPagina(paginaAtual);
}
});

$("#proximo").on('click', () => {
if (paginaAtual < totalPaginas) {
paginaAtual++;
exibirPagina(paginaAtual);
}
});

exibirPagina(paginaAtual);
4. Melhores Práticas:
   • Utilize atributos data-* para armazenar metadados das colunas e linhas da tabela.
   • Utilize classes CSS para controlar a aparência da tabela e dos elementos de navegação.
   • Utilize animações para criar transições suaves entre as páginas e os resultados da filtragem.
   • Utilize requisições AJAX para carregar os dados da tabela dinamicamente.
   • Utilize a versão mais recente do jQuery e das bibliotecas de suporte.

Conclusão

A manipulação de tabelas HTML com jQuery permite que você adicione funcionalidades avançadas como ordenação, filtragem e paginação, melhorando a experiência do usuário e facilitando a navegação e a análise de dados. Ao dominar as técnicas apresentadas neste artigo, você poderá criar tabelas HTML interativas e eficientes, adaptadas às necessidades da sua aplicação.

Mas antes de dominar o jQuery, se for o seu caso, toda jornada tem um início. Vamos entender quais são os conhecimentos básicos necessários para aproveitar ao máximo esta poderosa biblioteca. Para iniciar seus estudos no jQuery, você precisará dominar as seguintes tecnologias:

E se você gosta do nosso conteúdo, não deixe de contribuir adquirindo os serviços e produtos dos nossos apoiadores e empresas que somos associados: