Colreorder and save state
Colreorder and save state
mahesh3005
Posts: 3Questions: 0Answers: 0
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 ??
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 ??
This discussion has been closed.
Replies
Can someone respond to my above query please?
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.
[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
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.
Any ETA on next release? And thank you for all your work!