DataTables é a biblioteca JavaScript para controle e manipulação interativa de tabelas dinâmicas. Com DataTables, você pode carregar tabelas facilmente em seu site com um layout amigável, além de funções de busca, ordenação e paginação.
Você pode baixar o DataTables em https://datatables.net/.
Declarando o DataTables
Para usar o DataTables geralmente são necessários quatro passos:
- Declarar o CSS do DataTables
- Declarar o JS do DataTables
- Declarar a tabela no HTML
- Ativar a tabela via JavaScript
Para ilustra isso, vamos criar um código HTML desta forma:
<!doctype html>
<html lang="pt-br">
<head>
<title>DataTables</title>
<meta charset="utf-8">
<meta name="author" content="Diego Mariano">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- DataTables CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<p><lable for="arquivos">Arquivo: </lable><select id="arquivos"></select></p>
<!--<select id="colunas"></select>-->
<table id="minha_tabela">
<thead></thead>
<tbody></tbody>
</table>
<p style="font-size: 10px; color:#aaa; text-align: right;">by <a href="https://diegomariano.com">@dcbmariano</a></p>
<!-- DataTables JS -->
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<!-- Ativando tabela-->
<script src="script.js"></script>
<!-- Bootstrap JavaScript Libraries -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous">
</script>
</body>
</html>Note que obrigatoriamente a tabela deve ter um id, além das tags <thead> e <tbody>.
Ative a tabela usando o comando:
$("#minha_tabela").DataTable()
Plotando tabelas dinâmicas
Neste exemplo, vamos editar o arquivo script.js para permitir a seleção de tabelas dinâmicas. Neste caso, usaremos uma caixa de seleção para carregar arquivos no formato CSV. Lembre-se que todo o conteúdo do “script.js” deve estar envolvido pela função document.ready do jQuery para garantir que não tenha componentes ainda não carregados:
$(()=>{
// [...] todo conteúdo deve estar aqui dentro
})
Vamos precisar ainda de um arquivo “CSV” para ser carregado na nossa tabela:
| id,Nome,Idade 1,José,23 2,Maria,33 3,Carlos,10 4,Paula,17 5,Maraísa,36 6,Matuzalém,100 |
Passo 1. Declare os parâmetros globais
Declare os parâmetros que serão usados no código como um objeto:
// parâmetros globais
const parametros = {
dados: null,
colunas: null,
onde: '#minha_tabela',
tabela: $().DataTable(),
arquivos: ['1.csv','2.csv'],
arquivo_atual: 0
}
Note que declaramos os arquivos em um array. Neste exemplo, apenas dois arquivos foram incluídos (“1.csv” e “2.csv”). A propriedade arquivo_atual deve armazenar o índice do arquivo a ser carregado (por padrão, o arquivo no índice zero será carregado, ou seja, “1.csv).
Passo 2. Função plotar
Agora vamos criar uma função para plotar nossos dados. Observe:
// plotando a tabela
const plotar = ()=>{
// desestruturando o objeto
let { dados, colunas, onde, tabela } = parametros
// destrua a tabela anterior
tabela.destroy()
// limpe o elemento html
$(onde).empty()
// primeira linha contém os nomes das colunas
colunas = dados[0]
// remove a primeira linha (nome das colunas)
dados.shift()
// selecionar colunas
colunas = colunas.map(d => ({ title: d }))
// ativar datatable
parametros.tabela = $(onde).DataTable({
"data": dados,
"columns": colunas,
"order": [[0, 'asc']] // ordena pela coluna 0
})
}
O método destroy() pode ser usado para resetar configurações de uma tabela. Você deve usá-lo sempre que precisar criar uma nova tabela usando um mesmo elemento <table> e seu determinado ID.
tabela.destroy()
Apague também o conteúdo do elemento HTML que está com a tabela original:
$(onde).empty()
Para selecionar as colunas, precisamos pegá-las no arquivo (no exemplo, o cabeçalho estava na primeira linha do arquivo). Note como usamos a função map() para incluir um título (title) para a coluna (requisito do DataTables).
Passo 3 – Criando uma select com todos os arquivos
// listar arquivos --> INÍCIO
const listarArquivos = (arquivos)=>{
// para cada arquivo
for(i of arquivos){
// adicione uma option no select
$("#arquivos").append(
"<option value='" + i + "'>" + i + "</option>"
)
}
}
// listar arquivos --> FIM
Passo 4 – Carregando o arquivo atual
// escolher arquivo atual --> INÍCIO
const carregarArquivo = ()=>{
let novo_arquivo = $("#arquivos").val()
// atualizar o índice do arquivo atual
parametros.arquivo_atual = parametros.arquivos.indexOf(novo_arquivo)
// alterando o índice
lerDados(novo_arquivo)
}
Passo 5 – Lendo dados do arquivo
// ler dados --> INÍCIO
const lerDados = (arquivo)=>{
// ler arquivo usando jQuery
$.ajax({
url: arquivo,
success: (dados)=>{
dados_formatados = formatarTabela(dados)
parametros.dados = dados_formatados
plotar()
}
});
}
// ler dados --> FIM
Passo 6 – Formatando a tabela
// formatar tabela --> INÍCIO
const formatarTabela = (dados)=>{
let dados_tabelados = [];
// separa as linhas
let linhas = dados.split("\n")
// para cada linha
for(let linha of linhas){
// remove caracteres especiais
linha = linha.replace("\r","")
// separa as células
celulas = linha.split(",")
// salva células
dados_tabelados.push(celulas)
}
return dados_tabelados
}
// formatar tabela --> FIM
Passo 7 – Configurando o evento que troca a tabela atual (e executando)
// iniciar
const iniciar = ()=>{
let { arquivos, arquivo_atual } = parametros
// cria o select com o nome dos arquivos
listarArquivos(arquivos)
// lê os dados do arquivo selecionado
lerDados(arquivos[arquivo_atual])
// evento: seleciona outro arquivo
$("#arquivos").on("change", ()=>{
carregarArquivo()
})
}
// executa
iniciar()
Por fim, você verá uma tela assim:
Código fonte
Código fonte usado:
2 respostas em “DataTables”
Olá, preciso de ajuda em questão de usar a DataTable, não acho em lugar nenhum isto, seria o seguinte.
Tenho uma APIRest (nodejs + express) que me retorna os dados do servidor em json, ele faz a busca e cria automaticamente as linhas em uma table, as linhas são criadas dinamicamente por uma função criaLinha() usando appendchild etc, só que quando coloco o DataTable, ele cria como se fosse fora disso, eu gostaria de fazer ele criar dentro da DataTable teria como? Se puder me dar uma ajuda eu agradeceria.
[…] DataTables (https://datatables.net) é sem sombra de dúvidas uma das mais fantásticas ferramentas para exibição de tabelas dinâmicas e interativas na web. De fato, tenho apresentado diversos artigos sobre o DataTables. Aqui, apresento um passo-a-passo para configurar os parâmetros de declaração de uma tabela interativa. Para mais detalhes, acesse os nossos artigos anteriores sobre o DataTables. […]