I am using data table and allowing user to re-order columns , there is a refresh function which will make a AJAX call to fetch the JSON from server and re-initialize and load the data table every 1 minute.
I have 8 columns out of which 1 column is hidden and initial sorting is based on this hidden column.
PFB the function which is called when the page loads and also every minute for refreshing the data table :
bindDefaultTable : function(data) {
mapobjects.defaultCounter = 0;
mapobjects.oDefaultTable = $('#records-short').dataTable({
"fnRowCallback" : function(nRow, aData, iDisplayIndex) {
return MapUI.attachZoomOnRowClickEvent(nRow, aData.lat, aData.lon, aData.fixQuality);
},
"bStateSave": true,
"bProcessing" : true,
"bPaginate" : true,
"bLengthChange" : true,
"iDisplayLength" : Global.rowLength,
"bSort" : true,
"sScrollY" : mapTableLength,
"bInfo" : false,
"bAutoWidth" : false,
"bDestroy" : true,
"oLanguage" : {
"sSearch" : ""
},
"sDom" : 'R<"clear">T<"clear">lfrtip',
"aaSorting" : [ [ 1, "desc" ] ],
"oTableTools" : {
"sSwfPath" : "js/csf/DataTables-1.9.4/extras/TableTools/media/swf/copy_csv_xls_pdf.swf",
"aButtons" : [ {
"sExtends" : "pdf",
"sFileName" : "livefleet.pdf",
"sButtonText" : "",
"sPdfOrientation" : "landscape",
"sPdfMessage" : "",
"sTitle" : "LiveFleet",
"mColumns" : "visible"
}, {
"sExtends" : "xls",
"sFileName" : "livefleet.xls",
"sButtonText" : "",
"sPdfOrientation" : "landscape",
"sPdfMessage" : "",
"sTitle" : "LiveFleet",
"mColumns" : "visible"
} ]
},
"aaData" : data,
"aoColumns" : [ {
"mDataProp" : "vehicle",
"sWidth" : '5%'
}, {
"mDataProp" : "dateAndTime",
"sWidth" : '5%',
"bVisible" : false
}, {
"mDataProp" : "convertedTimeToUserTimze",
"sWidth" : '5%',
"iDataSort" : 1
}, {
"mDataProp" : "lastLocation",
"sWidth" : '5%'
}, {
"mDataProp" : "status",
"sWidth" : '5%'
}, {
"mDataProp" : "lastActivity",
"sWidth" : '5%'
}, {
"mDataProp" : "speed",
"sWidth" : '5%'
}, {
"sType" : "title-numeric",
"mDataProp" : "stop",
"sWidth" : '5%'
} ],
"aoColumnDefs" : [ {
"fnRender" : function(oObj, sVal) {
var id = oObj.aData.vehicleId;
return '<a id=' + id + ' title="See breadcrumb detail" class="breadcrumb">' + sVal + '</a>';
},
"aTargets" : [ 0 ]
}, {
"fnRender" : function(oObj, sVal) {
if (oObj.aData.fixQuality != "0" || oObj.aData.fixQuality != false) {
sVal = "";
}
return sVal;
},
"aTargets" : [ 3 ]
}, {
"fnRender" : function(oObj, sVal) {
return jQuery.i18n.prop(sVal.toString());
},
"aTargets" : [ 4 ]
}, {
"fnRender" : function(oObj, sVal) {
return jQuery.i18n.prop('eventType.' + sVal.toString());
},
"aTargets" : [ 5 ]
}, {
"fnRender" : function(oObj, sVal) {
if (sVal == null) {
sVal = 0;
}
var calcValue;
var val = sVal * kiloToMileConstant;
if (val == 0) {
calcValue = val;
} else {
var end = val.toString().indexOf(".");
calcValue = val.toString().substring(0, end);
}
var cls = (parseInt(calcValue) > 0) ? "moving" : "";
return '<span class="' + cls + '">' + calcValue + " " + GlobalConstant.MPH + '</span>';
},
"aTargets" : [ 6 ]
}, {
"fnRender" : function(oObj, sVal) {
var str = Global.convertMinToDaysHrsAndMins(sVal);
if (sVal == null || sVal.toString().trim() == "" || parseInt(sVal) == 0) {
sVal = 0;
}
return "<span title=" + sVal + ">" + str + "</span>";
},
"aTargets" : [ 7 ]
} ],
"fnCreatedRow" : function(nRow, aData, iDataIndex) {
$(nRow).addClass("marker-" + (iDataIndex + 1));
},
"fnInitComplete" : function(oSettings, json) {
Global.addExportButtons("records-short", "table-sm");
Global.filterOnPaste(oSettings.sTableId);
},
"fnDrawCallback" : function(oSettings) {
if ($(".active").attr("id") == "notbreadcrumb") {
MapUI.createMarkersFromTable(oSettings);
}
}
});
if (mapobjects.oDefaultTable != null) {
mapobjects.oDefaultTable.fnAdjustColumnSizing();
}
},
the problem I am facing is if I RE-ORDER columns and after a minute refresh happens , the table headers and table data are not in synch as refresh is loading the table data in the predefined order based on indexes in aoColumnDefs.
can you please suggest a way to solve this?
WHAT I WANT : if user re-orders the columns and refresh happens , the table should be refreshed by retaining the order of columns selected by user.
should I use any combination of bRetrieve , bDestroy ??