Categorias
Artigos Front-end Home

DataTables

Criando tabelas interativas em JavaScript com DataTables

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:

  1. Declarar o CSS do DataTables
  2. Declarar o JS do DataTables
  3. Declarar a tabela no HTML
  4. 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
1.csv

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:

Interface gráfica do usuário

Descrição gerada automaticamente com confiança média

Código fonte

Código fonte usado:

Por Diego Mariano

Doutor em Bioinformática pela Universidade Federal de Minas Gerais com atuação na área de ciência de dados e aprendizado de máquina aplicados ao aperfeiçoamento de enzimas usadas na produção de biocombustíveis. Mestre em Bioinformática, também pela UFMG, atuando na área de desenvolvimento de sistemas Web para montagem de genomas. Atualmente realiza estágio pós-doutoral no Departamento de Ciência da Computação da UFMG com foco em desenvolvimento de sistemas Web para Bioinformática, análise exploratória e visualização de dados. Tem conhecimentos nas linguagens: PHP, JavaScript, Python, R, Perl, HTML, CSS e SQL.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.

error

Compartilhe este post!

Facebook
YouTube
LinkedIn
Instagram