DataTables: reload data from server

DataTables: reload data from server

angeloimmangeloimm Posts: 1Questions: 1Answers: 0

Hi there

We are using datatable in our project. We are using DataTables version 1.9.4. All seems to work pretty good, besides one thing
We have the table and we do an Ajax call in order to load data from server and this is OK. We have a little (but boring) problem when we try to re-load data from server. Actually we have this code:

var table = null;
//Some JS code.....

function createTable(destory)

{

table = $('#wcmEventsTable').dataTable(
{
"bDestroy" : destroy,
"oLanguage": {
"sInfo": "",
"sLoadingRecords": "",
"sProcessing": ""
},
"bProcessing" : true,
"bServerSide" : true,
"bStateSave" : true,
"iCookieDuration" : 3600,
"fnStateSaveParams" : function(oSettings, oData) {
oData.oSearch.sSearch = "";
oData.iStart = 0;
},
"sAjaxSource" : theUrl,
"sCookiePrefix" : "WCM_CALENDAR_EVENT_COOKIE_",
"bJQueryUI" : true,
"bFilter" : false,
"sPaginationType" : "full_numbers",
"aoColumnDefs" : [
{
"bSortable" : true,
"sClass":"alignCenter",
"mData" : "title",
"aTargets" : [ 0 ],
"mRender" : function(data, type, row) {
    return data;
}
}, {
"bSortable" : true,
"mData" : "start",
"sClass":"alignCenter",
"mRender" : function(data, type, row) {
    var xStartDate = new XDate(data); 
    return xStartDate.toString('dd/MM/yyyy (HH:mm)');
},
"aTargets" : [ 1 ]
}, {
"bSortable" : true,
"mData" : "end",
"sClass":"alignCenter",
"mRender" : function(data, type, row) {
    var xEndDate = new XDate(data); 
    return xEndDate.toString('dd/MM/yyyy (HH:mm)');
},
"aTargets" : [ 2 ]
}, {
"bSortable" : false,
"mData" : "id",
"mRender" : function(data, type, row) {
    var res = '<a href="'+data+'" id="cancElemen_'+data+'" name="cancElemen_'+data+'" ><img src="<spring:url value="/images/cancella.png"/>" title="Cancella elemento"/></a>';
    res += '<a href="'+data+'" name="modElemen_'+data+'" id="modElemen_'+data+'" ><img src="<spring:url value="/images/modifica.png"/>" title="Modifica elemento"/></a>';
    return res;
},
"aTargets" : [ 3 ]
}]
}); 
}

This code works good, but when we click a button in order to re-load data (becouse user has a section where he/she can change some filters) the table is drawn with new data but it has a strange layout....at the beginning (on the first call the one with destroy=false) it has the wished layout while on the second call (the one with destroy=true becouse user changed some filters) it is drawn with a "smaller" layout...that is columns are not at 100% of weight and it looks like smaller than before....We were investigating also on using the fnDraw function...but actually we have the same behaviour....Any tips in order to solve this little issue?
Thank you
Angelo

This discussion has been closed.