Column Size with DataTables

Question

Column Size with DataTables

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I'm using the DataTables plugin to page a records into a panel. The problem is that this table has 5 columns, the last one is called action where there are 4 links (currently one below the other because of column size). I would like to increase the size of this column so that it is at least 2 on each line, it would only need to increase the size of the column. I currently have the following code:

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

When you're loading the page, the ação column is the size I want, but when it loads, it returns to its tiny size. I already tried to put class in columnDefs and then in css use width: 40%! Important but nothing worked.

jquery jquery-datatables plugin

asked by anonymous 30.10.2015 / 14:16

2 answers

How to kill all dialogs on the screen at once? Certificate and SSL connection on Wildfly

score 1 · Answer 1

Try the following:

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

Where

"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)

score 0 · Answer 2

The only way it worked for me was:

Add the CSS below

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

And in the HTML put the percentage, eg:

    <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>

This response was inspired by the responses of this post: link