Parâmetros do 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
    ]; 
  })
});