Question

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 ?

Answer 1

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 ?