Resumo: 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. Para mais detalhes, acesse os nossos artigos anteriores sobre o DataTables.

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.

Apagando uma tabela

Você pode apagar uma tabela usando destroy() . Apagar tabelas são importantes, por exemplo, caso deseje alterar o valor de uma tabela já carregada anteriormente sem a necessidade de atualizar a página (via Ajax por exemplo). No exemplo a seguir, faremos isso por meio de um botão:

var tabela = $('#minha-tabela').DataTable();
$('#botao-apaga-tabela').on( 'click', function () {
tabela.destroy();
} );

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
]; 
})
});

Listando todos os itens de uma tabela

Por padrão, DataTables permite que você exiba 10, 25, 50 ou 100 itens. Entretanto, podemos alterar esses valores usando lengthMenu . Veja como:

// tabela interativa
let tabela  = $('#minha-tabela').DataTable({
// configurações do datatables *****
pageLength: 25,
"lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "Tudo"]], // permite listar todos os itens
})

Sua tabela agora irá exibir as seguinte opções:

A propriedade pageLength define a quantidade inicial de itens exibida.

Note que, por padrão, você verá a seguinte mensagem:

Exibir 25 resultados por página.

Executar uma função depois que a tabela for carregada

Algumas vezes você pode precisar executar uma função depois que a tabela for carregada. Se você tentar fazer uma modificação na tabela fora do escopo do DataTables, via jQuery por exemplo, isso não irá funcionar. Assim, para executar funções depois que a tabela for carregada, precisamos usar a propriedade drawCallback .

Por exemplo, digamos que desejemos alterar o campo “buscar”. Observe como podemos fazer isso no DataTables com a propriedade drawCallback:

// tabela interativa
let tabela  = $('#minha-tabela').DataTable({
// configurações do datatables *****
"drawCallback":()=>{ // depois que a tabela for carregada
$('#licitantes_filter').html('<label><small>Buscar por CNPJ ou razão social:</small><input type="search" class="" placeholder="" aria-controls="licitantes"></label>');
}
}) //$('#licitantes').DataTable({

Isso fará com que o campo busca apareça assim:

IMPORTANTE: após testes, percebi que alterar o campo de busca causa erros ao usar essa funcionalidade. Vou deixar esse código aqui apenas como ilustração de como usar o drawCallback, mas não faça isso em um exemplo real.

Processamento via server-side com Ajax

Por padrão, DataTableas aplica paginação via front-end. Entretanto, algumas vezes podemos ter a necessidade de exibir tabelas gigantescas (requisições maiores do que 10 MB já são consideradas grandes). Muitas vezes é inviável esperar o carregamento desses dados antes de exibi-los, podemos implementar uma paginação via back-end. Nesse caso, o processo de paginação é mais complexo, mas você ganha bastante em performance.

Em Datatables, podemos fazer isso usando a propriedade ajax combinada com as propriedades serverSide e processing . Note que ajax recebe como entrada uma função com dois parâmetros. O primeiro deles armazena os valores atuais: e o segundo é uma função de callback que deverá ser chamada para atualizar a tabela.

Observe o que tem nesse objeto d :

No exemplo a seguir faremos a implementação de uma tabela interativa que pega dados do back-end usando fetch API. Há muitas formas de fazer isso, como por exemplo, usando PHP. Entretanto, faremos usando apenas JavaScript por uma escolha pessoal.

Note que para funcionar, você precisará da aplicação back-end funcionando e pelo menos dois endpoints: (1) retorna os dados requisitados e (2) retorna a quantidade de itens.

Neste exemplo, os endpoints realizam requisições via GET e podem receber parâmetros como nome, ordem, busca, cnpj (se trata da uma busca por empresas). Nossa API está armazenada na variável backend (não vamos exibi-la aqui, mas imagine que é algo como http://localhost:8000 ou https://site-exemplo.com). Há ainda algumas funções e classes presentes que não tem utilidade para compreender o funcionamento do código, por isso, detalhes foram ocultados (como formata_cnpj).

Observe como podemos implementar paginação via back-end:

// cabeçalho -------------------------------------------------------------------------
async function total_itens(busca=''){
// retorna a quantidade de itens (importante para o datatables)
let url = backend + '/api/quantidade/listar?itens=true'
if((busca != '')&&(busca.length >= 2)){
// não ativo se campo busca rápida estiver com menos do que 2 caracteres
if(eh_numero(busca.slice(0,1))){
url += '&cnpj='+limpa_cnpj(busca);
}
else{
url += '&nome='+busca.toUpperCase();
}
}
return await fetch(url).then(response => response.json())
}
// FIM cabeçalho ----------------------------------------------------------------------
async function lista_itens(itens=25, inicio=0, ordenar_por='nome',ordem='desc',busca=''){
// função que recebe os dados da API
const pagina = parseInt(inicio / itens)
let url = backend + '/api/listar?'+
'pagina='+pagina+
'&itens='+itens+
'&ordenar_por='+ordenar_por+
'&ordem='+ordem;
if((busca != '')&&(busca.length >= 2)){
// não ativo se campo busca rápida estiver com menos do que 2 caracteres
if(eh_numero(busca.slice(0,1))){
url += '&cnpj='+limpa_cnpj(busca);
}
else{
url += '&nome='+busca.toUpperCase();
}
}
// console.log(url)
return await fetch(url)
.then(response => response.json())
}
// tabela interativa
let tabela  = $('#itens').DataTable({
// configurações do datatables *****
serverSide: true,
processing: true,
pageLength: 25,
"lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "Tudo"]],
language: { url: frontend + "/data/datatables_br.json" },
columnDefs: [
{ targets: [2],    className: 'text-center' },
{ targets: [3, 4], className: 'dt-body-right' },
{ targets: [0],    className: 'w130px' }
],
order: [4, 'desc'], // ordena por alarme => desc
"drawCallback":()=>{ // depois que a tabela for carregada
$('#itens_filter').html('<label><small>Buscar por CNPJ ou razão social:</small><input type="search" class="" placeholder="" aria-controls="licitantes"></label>');
},
// requisições assíncronas via ajax + fetch API
ajax: function(d, cb){
// d => recebe os dados atuais do datatables (página atual, ordem, etc.)
// cb => função de callback (deve ser chamada pra atualizar a página)
let inicio = d.start;
let itens = d.length; 
if(itens == -1){ itens = 10 } 
let ordem = d.order[0].dir;
let ordenar_por = d.order[0].column;
ordenar_por = ordenar_por == 0 ? 'cnpj' :
ordenar_por == 1 ? 'nome_empresa' : 'nome_empresa' // default
let busca = d.search.value;
// console.log(d)  
total_itens().then(total => {
lista_itens(itens, inicio, ordenar_por, ordem, busca)
.then(dados => { 
return cb({
recordsTotal:total, 
recordsFiltered: total,//(busca != '') ? total : itens, 
start: inicio,
length: itens,
data:dados.map(
i=>{
return [
// colunas são exibidas aqui
i.id, // id 
i.cnpj, //  cnpj
i.nome_empresa // nome da empresa 
]
}
)
}) 
});
});
}
}) //$('#itens').DataTable({

URL Original da postagem: Read More