CODEWITHSUNDEEP
jquerydatatablewidth
user1165952
user1165952

Reputation: 255

How to specify the column width in a DataTable?

I have the following datatable:

$(function() {
    var dataTableColumns = [
        { "sType": "numeric" },     null, null, null, null, null,
        null, null, null, null, null, { "sType": "date-dayofweek" },
        null, null, null, null, null, null, { "sType": "date-dayofweek" },
        null, null, null, null, null, 
        null, null, null, null, null,
        null, null, null, null, 
        null, null, null, null,  
        null, null, null, null,  
        null, { "sType": "date" }, null
    ];

    oTable = $('#example').dataTable({
        "bPaginate" : true,
        "aaSorting": [ [0,'asc'] ],
        "aoColumns" : dataTableColumns,
        "oLanguage": {
            "sLengthMenu": 'Show <select>'+
                '<option value="10">10<\/option>'+
                '<option value="25">25<\/option>'+
                '<option value="50">50<\/option>'+
                '<option value="100">100<\/option>'+
                '<option value="-1">All<\/option>'+
                '<\/select> records'
        },
        "iDisplayLength": -1,
    });
});

Few columns in the above datatable contain text data and I want to specify width option for those columns. I tried various options bAutoWidth, sWidth, td width, css style, fnAdjustColumnSizing, but nothing seems to work.. I dont know what's going wrong.. Please help!!

Upvotes: 2

Views: 8750

Answers (2)

Maxime
Maxime

Reputation: 8959

If you are using DataTable 1.10.x or newer, you must know that the autoWidth parameter must be set to false to make it work properly.

See this example:

$('#example').dataTable( {
  "autoWidth": false,
  "columnDefs": [
    { "width": "20%", "targets": 0 }
  ]
} );

Note: Even the official documentation won't tell you that.

Upvotes: 2

user1165952
user1165952

Reputation: 255

I figured this out. Gave the following option in table's html declaration style (width: 4000px) and bAutoWidth: false. I know this a brute-force method to fix things, but I have no other choice. I really didn't like the column widths set by datatable.

Upvotes: 4

Related Questions