Fixed width columns doesn't work

Fixed width columns doesn't work

JujuPommeJujuPomme Posts: 50Questions: 6Answers: 0

Hey,

I've this following configuration for my datatable :

$('a#_action_datatable').click(function() {
    var table = $('#example').DataTable( {
        "language": {
            "lengthMenu": "Voir _MENU_ enregistrements par page",
            "sInfo": "Résultat des _START_ sur _END_ enregistrement sur un total de _TOTAL_",
            "sSearch": "Rechercher"
        },
        "ajax": "_send_actions_in_json.php",
        "paging": true,
        "autoWidth": false,
        "columnDefs": [{
            targets: 0,
            width: '10px'
          },
          { 
            targets: 1,
            width: '80px'
          },
          { 
            targets: 2,
            width: '150px'
          },
          { 
            targets: 3,
            width: '100px'
          },
          { 
            targets: 4,
            width: '250px'
          },
          { 
            targets: 5,
            width: '150px'
          }],
        "responsive": {
            "details": {
                "display": $.fn.dataTable.Responsive.display.modal(),
                "renderer": function (api, rowIdx, columns) {
                    var data = $.map(columns, function (col, i) {
                        return ('<tr>' +
                                '<td>'+col.title+'</td> ' +
                                '<td>'+col.data+'</td>'+
                                '</tr>');
                    } ).join('');
                    return $('<table/>').append(data);
                }
            }
        },
        "retrieve": true,
        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "NOM" },
            { "data": "TYPE" },
            { "data": "DESTINATAIRE" },
            { "data": "DETAIL" },
            { "data": "DATE_PREVU" }
        ],
        "order": [[4, 'desc']]
    } );
});

I set the autoWidth to false.

But in my datatable, when the string is too long, the column is self- adjusted and it goes off screen
How can i fix it?

Thanks,

This question has an accepted answers - jump to answer

Answers

  • JujuPommeJujuPomme Posts: 50Questions: 6Answers: 0

    Now it works as I want.

    But i've a second problem on my row's height. It's not fixed and I don't find any properties to fix it.

  • allanallan Posts: 63,791Questions: 1Answers: 10,513 Site admin
    Answer ✓

    There are no properties in DataTables to fix the row height - you have to use CSS if you want to do that. td { height: 30px; } for example.

    Allan

  • JujuPommeJujuPomme Posts: 50Questions: 6Answers: 0

    Yep, that's what I do. It approximately works.

    I've one more question for you Allan, maybe and I hope the last one.

    How can I display a progress bar during the loading of my datas?

    Rgds,

This discussion has been closed.