Column Size with Datatables

Question

I’m using the plugin DataTables to paginate a record in 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 the size of the column). I would like to augment the size of this column so that it is at least 2 in each row, I would only need to increase even the column size. I currently have the following code:

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

When loading the page, the column ação gets the size I want, but when it’s finished loading, it goes back to its tiny size. I’ve tried putting classin columnDefs and then on css use width: 40% ! Port but nothing helped.

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)

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 HTML put the percentage, example:

    <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: https://stackoverflow.com/posts/51674965/edit

Answer 3

In the plugin documentation (version 1.10.21) there is an example of how to format column width.

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

} );