Categorias
Artigos JavaScript

Parâmetros do DataTables

Veja como ordenar colunas, alterar a quantidade de itens em uma página e alterar o alinhamento no DataTables

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.

Convertendo uma tabela em interativa

Note que para inicializar uma tabela com DataTables, você precisa primeiro criar a tag da tabela e dar a ela um identificador, como por exemplo, <table id="nome-da-tabela">.

A seguir, podemos convertê-la em dinâmica usando o script:

  $('#nome-da-tabela').DataTable();

Agora, que já declaramos a tabela, podemos aplicar uma série de parâmetros para melhorar a configuração de nossa tabela. Vamos começar com coisas simples, como selecionar a coluna que desejamos ordenar.

Não se esqueça!

Lembre-se de adicionar a tag <thead> e <tbody>, além de adicionar títulos para as colunas desejadas usando <th> dentro de <thead>.

Ordenando uma coluna com DataTables

Podemos escolher qual coluna desejamos ordenar, utilizando o parâmetro order. Esse parâmetro recebe um array com dois valores: (1) a coluna que desejamos ordenar (lembre-se que a contagem começa em 0) e (2) se quer ordenar crescente (asc) ou decrescente (desc).

$('#nome-da-tabela').DataTable(
  {
    order:[3, 'desc']
  }
);

Neste exemplo, estamos ordenando a quarta coluna de modo decrescente.

Alterando a quantidade de itens por página

Podemos alterar a quantidade de itens exibidos em uma página usando pageLength.

$('#nome-da-tabela').DataTable({
   pageLength: 25,
});

Neste exemplo, alteramos a quantidade de itens exibidos para 25. Por padrão podemos usar 10, 25, 50 ou 100.

Alinhando o texto de uma coluna à direita

Podemos alinhar o texto de uma coluna à direita usando o parâmetro columnDefs. Note que podemos usar esse parâmetro para aplicar uma classe ao texto da coluna. Veja:

$('#nome-da-tabela').DataTable({
   columnDefs: [
      {
          targets: [1,2,3],
          className: 'dt-body-right'
      }
    ],
});

Neste caso, estamos alinhando a segunda, terceira e quarta coluna à direita (aplicando a classe dt-body-right).

Centralizando texto de uma coluna

Note que podemos ainda centralizar o texto usando o mesmo método, mas, neste caso, aplicando a classe dt-body-center. Veja:

$('#nome-da-tabela').DataTable({
   columnDefs: [
      {
          targets: 0,
          className: 'dt-body-center'
      }
    ],
});

Aqui estamos centralizando apenas o texto da primeira coluna (lembre-se mais uma vez: a contagem começa em 0).

Alterando a linguagem para português

Para alterar a linguagem da interface padrão de uma tabela use o parâmetro language:

$('#nome-da-tabela').DataTable({
   language: {
      url: frontend + "/data/datatables_br.json"
    },
});

Note que você precisará do arquivo JSON com o dicionário de tradução. Você pode encontrá-lo aqui.

Alterando os dados

Agora faremos algo mais avançado. Digamos que você deseja alterar os dados durante o carregamento da tabela. Você pode fazer isso usando o parâmetro data.

Por exemplo, digamos que nos seus dados você tenha o campo “id”. Em vez de exibir apenas o ID, você deseja que seja exibido um link para uma página que utilize o ID como identificador. Você pode fazer isso aplicando o método map ao objeto que armazena o array de dados. Veja:

let dados = [
  [1, 'um'],
  [2, 'dois'],
  [3, 'tres']
]; //array com dados que serão exibidos na tabela

$('#nome-da-tabela').DataTable({
  data: dados.map(i=>{
    return [
      `<a 
         target='_blank' 
         href='http://site_exemplo.com/${i[0]}'
       >${i[0]}</a>`, // primeira coluna
       i[1]  // segunda coluna
    ]; 
  })
});

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