-2

Estou usando o plugin DataTables para fazer a paginação de uns registros em um painel. O problema é que essa tabela tem 5 colunas, a última se chama ação aonde estão 4 links (atualmente está um embaixo do outro por causa do tamanho da coluna). Eu gostaria de aumentar o tamanho dessa coluna para que fique pelo menos 2 em cada linha, só precisaria aumentar mesmo o tamanho da coluna. Atualmente tenho o seguinte código:

$('#table-clientes').DataTable( {
                    "ajax": baseURL,
                    "deferRender": true,
                    "order": [[ 0, "asc" ]],
                    "pageLength": 300,
                    "columnDefs": [
                        { "width": "50%", "targets":4 }
                      ]
                } );

Quando está carregando a página, a coluna ação fica do tamanho que quero, mas quando acaba de carregar, ela volta a seu tamanho minúsculo. Já tentei colocar classem columnDefs e depois no css usar width: 40% !important mas nada adiantou.

3
  • Tente definir o tamanho das outras também, já fiz isso uma vez no datatables e ele só aceitou quando defini o tamanho de todas as colunas de forma independente.
    – user28595
    Commented 30/10/2015 às 13:38
  • A ordem no HTML está correta?
    – David
    Commented 30/10/2015 às 17:27
  • Sim, até deixei pra lá na verdade. Não foi tão necessário. Obrigado da mesma forma! Commented 30/10/2015 às 22:51

4 Respostas 4

0

Tenta o seguinte:

$('#table-clientes').DataTable( {
                    "ajax": baseURL,
                    "deferRender": true,
                    "order": [[ 0, "asc" ]],
                    "pageLength": 300,
                    "columnDefs": [
                        { "title": "Nome do Cliente", "data": "NOMECLIENTE" "width": "50%"}
                      ]
                } );

Onde

"title": "Nome do Cliente" (O titulo que exibira na sua table)
"data": "NOMECLIENTE" (Como você chama o campo do BD)
"width": "50%" (O tamanho que v)
-1

Na documentação do plugin (versão 1.10.21) tem um exemplo de como formatar a largura das colunas.

https://datatables.net/extensions/fixedcolumns/examples/initialisation/size_fluid.html

$(document).ready(function() {
var table = $('#example').DataTable( {
    scrollY:        "300px",
    scrollX:        true,
    scrollCollapse: true,
    paging:         false,
    columnDefs: [
        { width: '20%', targets: 0 }
    ],
    fixedColumns: true
} );

} );

-2

O único jeito que funcionou para mim foi:

Acrescentar o CSS abaixo

#table-clientes{
    table-layout: fixed !important;
    word-wrap:break-word;
}

E no HTML colocar a porcentagem, exemplo:

    <th style='width: 5%;'>Coluna 1</th>
    <th style='width: 15%;'>Coluna 2</th>
    <th style='width: 40%;'>Coluna 3</th>
    <th style='width: 20%;'>Coluna 4</th>
    <th style='width: 10%;'>Coluna 5</th>
    <th style='width: 10%;'>Coluna 6</th>
</tr>

Essa resposta foi inspirada nas respostas desse post: https://stackoverflow.com/posts/51674965/edit

-4

Olá no desktop estava ok mas no mobile apresentava problemas e resolvi assim:

#tabelas{ width: max-content; }

.lista-nome{ width: 250px; }

.lista-telefone{ width: 120px; }

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .