CODEWITHSUNDEEP
jquerydatatables
af_khan
af_khan

Reputation: 1078

Auto resizing of columns width datatable

The datatable column are not auto resizing. Here is my code

var oTable =$('#test').dataTable( {
        "bJQueryUI": true,
        "aaData": aDataSet,
        "sPaginationType": "full_numbers",
        "oTableTools": {
        "aButtons": [ {"sExtends": "csv" , "sButtonText": "Save as CSV"}],
        "sSwfPath": "js/jquery/copy_csv_xls.swf"
    },
    "bAutoWidth" : true,
    "sDom": '<"H"lCf>t"H"<"F"iTp>',
    "aoColumnDefs": [
        { "bVisible": true, "aTargets": [ 11 ] }
    ],
    "aoColumns": [
        { "sTitle": "column1" },
        { "sTitle": "column1" },
        { "sTitle": "column1" },
        { "sTitle": "column1"},
        { "sTitle": "column1"},
        { "sTitle": "column1" },
        { "sTitle": "column1" },
        { "sTitle": "column1" },
        { "sTitle": "column1"},
        { "sTitle": "column1 By"},
        { "sTitle": "column1 Date"}
    ]
    } );
oTable.fnAdjustColumnSizing();
});

I want all the columns to auto resize at least based on their header value.

Upvotes: 9

Views: 50265

Answers (4)

sam ruben
sam ruben

Reputation: 385

Use the below code:

$($.fn.dataTable.tables(true)).DataTable().columns.adjust();

This will resize your table structure (css of the table).

Upvotes: 5

Rotimi
Rotimi

Reputation: 4825

You can also use datatable's Fluid column width feature. This will help auto-resize and add a scroll both on the X and Y axis should you have more columns to display

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

Gotten from HERE

Upvotes: 4

epquick
epquick

Reputation: 29

Put this code after data table initialization:

oTable.find('thead th').css('width', 'auto');

Upvotes: 1

davidkonrad
davidkonrad

Reputation: 85538

You just do it like if it was a "normal" <table> :

th, td {
    white-space: nowrap;
}

see fidle -> http://jsfiddle.net/YrWG5/ with some extreme long header / content.

Upvotes: 22

Related Questions