sexta-feira, 6 de janeiro de 2017

DataTables: Modificar cabeçalho de uma coluna

Olá, pessoas! Mais uma dica de programação, hoje para quem utiliza o plugin DataTables para JQuery, Existe alguns tipos de tabelas que me deparei em que o cabeçalho dele muda de acordo com algum parâmetros. Por exemplo, quero ver dados de um período de 3 meses a partir do mês X, e depois quero ver os mesmos dados só que a partir do mês Y. O fato é que para atualizar os dados é fácil, entretanto, o plugin não atualiza o cabeçalho da tabela, sendo que isso precisa fazer manualmente. Bem, para isso achei um algoritmo fácil que resolve o problema.



01. var colsName =  ["coluna1","coluna2", "coluna3"];
02. for (var i = 0; i < colsName.length; i++) {
03.    $("#table").DataTable().columns(i).header().to$().text(colsName[i]);
04. }
05. $("#table").DataTable().columns.adjust().draw();

Basicamente, o que está dentro do for é o comando para modificar o cabeçalho da coluna. Presta atenção no DataTable(), não confundir com o dataTable(), são duas funções API diferentes e o segundo não possuí o columns. A função to$(), pega a referência JQuery da célula (no caso, o cabeçalho da coluna) para finalmente poder editá-lo.
Na linha 05, nós executamos para ajustar e exibir o novo cabeçalho. Isso é necessário caso o texto altera as dimensões da tabela de alguma forma e acabar desalinhando a tabela.
Então é isso pessoal.

Nenhum comentário:

Postar um comentário