I'm currently using datatables with ajax data and I want do adjust the column width. So I found this function fnAdjustColumnSizing and I try to use it :

oTable = $('.datatable').dataTable( {
    "sScrollX": "100%",
    "sScrollXInner": "200%",
    "bScrollCollapse": true,
    "bDestroy" : true,
    "sAjaxSource": "xhr.php",
    "bFilter": false,
    "bSort": false,
    "bLengthChange": false,
    "bPaginate": false,
    "bInfo": false,
    "fnServerData": function ( sSource, aoData, fnCallback ) {
        $.ajax( {
            "dataType": 'json', 
            "type": "POST", 
            "url": "webservice.php", 
            "data": 'id=' + quotation_id + '&customer_id=' + id + '&action=true', 
            "success": function(msg){
                fnCallback(msg);
            }
        });
    },
    "fnInitComplete": function() {
        this.fnAdjustColumnSizing();
    }
});

The function haven't any effect but if I use it inside another event such like this :

$('#target').click(function() {
    oTable.fnAdjustColumnSizing();
});

It work well, any idea ?

I'm currently using datatables with ajax data and I want do adjust the column width. So I found this function fnAdjustColumnSizing and I try to use it :

oTable = $('.datatable').dataTable( {
    "sScrollX": "100%",
    "sScrollXInner": "200%",
    "bScrollCollapse": true,
    "bDestroy" : true,
    "sAjaxSource": "xhr.php",
    "bFilter": false,
    "bSort": false,
    "bLengthChange": false,
    "bPaginate": false,
    "bInfo": false,
    "fnServerData": function ( sSource, aoData, fnCallback ) {
        $.ajax( {
            "dataType": 'json', 
            "type": "POST", 
            "url": "webservice.php", 
            "data": 'id=' + quotation_id + '&customer_id=' + id + '&action=true', 
            "success": function(msg){
                fnCallback(msg);
            }
        });
    },
    "fnInitComplete": function() {
        this.fnAdjustColumnSizing();
    }
});

The function haven't any effect but if I use it inside another event such like this :

$('#target').click(function() {
    oTable.fnAdjustColumnSizing();
});

It work well, any idea ?

• javascript
• jquery
• datatables

3 Answers 3

Have you tried doing

"fnInitComplete": function() {
    oTable.fnAdjustColumnSizing();
}

Because i'm not sure that this points to table object

I find a solution by using a function inside the "success" callback of my ajax query :

$.ajax( {
    "dataType": 'json', 
"type": "POST", 
"url": "webservice.php", 
"data": 'edit_quotation=true&action=true' + data, 
"success": function(msg){
    fnCallback(msg);
    $('.overlay').hide();
    adjustTable();
}
});

function adjustTable(){
    oTable.fnAdjustColumnSizing();
}

And it work like a charm but I don't know why. Someone can explain ?

I had a similar problem in Internet Explorer 8 (not in Firefox): I was getting my headers unaligned with respect to the table body.

The table is initialized inside a 'modal' dialog (twitter bootstrap), AFTER it is shown. Finally, to make it work with Internet Explorer 8, after creating the table I'm making this call:

var t = setTimeout(function () { myTableObject.fnAdjustColumnSizing(false);}, 300);

This refreshes the table without making another unnecessary Ajax call, but it waits 300 ms before doing it, to 'let internet explorer do its thing' before readjusting. If you set lower values i.e. 10 ms) this doesn't work.

I hope it helps,

Roger