Colreorder and save state

mahesh3005

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 '' + sVal + '';
},
"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 '' + calcValue + " " + GlobalConstant.MPH + '';
},
"aTargets" : [ 6 ]
}, {
"fnRender" : function(oObj, sVal) {
var str = Global.convertMinToDaysHrsAndMins(sVal);
if (sVal == null || sVal.toString().trim() == "" || parseInt(sVal) == 0) {
sVal = 0;
}
return "" + str + "";
},
"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 ??

mahesh3005

Hi ,

Can someone respond to my above query please?

IMK

Hi,
I'm facing exact same problem with ColReorder and passing aaData to fnAddData(). Have you found a solution to this yet? If you do, please share. :)

I know that if I was to pass aoData to fnAddData() then everything would work just fine since property names would match column names. But I get row data in aaData format and converting it to aoData would be costly.

IMK

It must have something to do with how aoColumns.mData is not getting properly updated by ColReorder. By default, mData uses integer values "incrementally increased for each column", so when ColReorder changes columns around, it doesn't update mData with new indices. I'm looking into manually updating mData using fnReorderCallback() of ColReorder.

IMK

I added the following to table init, but it didn't work.
[code]
'oColReorder': {
'fnReorderCallback': function () {
var that = this;
$.each(this.s.dt.aoColumns, function (i, e) {
that.s.dt.aoColumns[i].mData = e._ColReorder_iOrigCol;
});
}
}
[/code]

seems like when aaData is passed, fnAddData() ignores mData values. :(

allan

Can you link to a page which uses the latest ColReorder nightly and shows the problem so we can debug it please?

Allan

IMK

Hello Allan. Thanks for taking time to look at this.

You can open http://jsfiddle.net/GTLmd/7/ to see it live. Once page loads, reorder some columns and then hit Reload Data. Data will not load into proper column.

I've then implemented fnReorderCallback() to update mData's value, but that didn't help - http://jsfiddle.net/GTLmd/8/. Also tried setting mData's value as a string - http://jsfiddle.net/GTLmd/10/. At last, tried setting mRender - http://jsfiddle.net/GTLmd/11/.

You can inspect console log to verify that values of mData get set. It seems that when fnAddData() detects that it's got an array of arrays, it simply adds data w/o reading mData/mRender values.

IMK

Ahh... missed your comment about "nightly" build. Of course, as soon as I updated my reference to nightly ColReorder, the problem is gone - http://jsfiddle.net/GTLmd/12/.

Any ETA on next release? And thank you for all your work!

atlemagnussen

Any news on this spesific problem? I'm encountering the same here :(