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.
Sumário
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
];
})
});