mdataprop fnrender oObj.aData[0] undefined error
mdataprop fnrender oObj.aData[0] undefined error
lcurtin
Posts: 6Questions: 0Answers: 0
I am hoping this is a n00b issue brought on by too little sleep and too short of a deadline. I hope I didn't create a distracting error editing my code for this forum. I, like everyone else, love DataTables. I wish I had more uses for it.
The first one, calldirection, works as expected and returns "To"s and "From"s like nobody's business. I am not as fortunate with the next two. CallDuration returns NaN:NaN and callDateString returns undefined. What simple thing am I missing?
[code]
"aoColumns": [
{ "mDataProp": "calldirection",
"bUseRendered": false,
"fnRender": function ( oObj ) {
var tofromtxt = "From";
if (oObj.aData[0] == 'inbound') {
tofromtxt = "To"
}
return tofromtxt;
}},
{ "mDataProp": "callDuration",
"bUseRendered": true,
"fnRender": function ( oObj ) {
var secs = oObj.aData[0];
var divisor_for_minutes = secs % (60 * 60);
var minutes = Math.floor(divisor_for_minutes / 60);
var divisor_for_seconds = divisor_for_minutes % 60;
var seconds = Math.ceil(divisor_for_seconds);
var mmss = "00:00";
if (minutes < 10){
mmss = "0" + minutes }
else {
mmss = minutes };
mmss = mmss + ":"
if (seconds < 10){
mmss = mmss + "0" + seconds }
else {
mmss = mmss + seconds };
return mmss;
}},
{ "mDataProp": "callDateString",
"bUseRendered": false,
"fnRender": function ( oObj ) {
var callDateString = oObj.aData[0];
callDateString = callDateString.substring(0,8)
return callDateString ;
}},
]
[/code]
The first one, calldirection, works as expected and returns "To"s and "From"s like nobody's business. I am not as fortunate with the next two. CallDuration returns NaN:NaN and callDateString returns undefined. What simple thing am I missing?
[code]
"aoColumns": [
{ "mDataProp": "calldirection",
"bUseRendered": false,
"fnRender": function ( oObj ) {
var tofromtxt = "From";
if (oObj.aData[0] == 'inbound') {
tofromtxt = "To"
}
return tofromtxt;
}},
{ "mDataProp": "callDuration",
"bUseRendered": true,
"fnRender": function ( oObj ) {
var secs = oObj.aData[0];
var divisor_for_minutes = secs % (60 * 60);
var minutes = Math.floor(divisor_for_minutes / 60);
var divisor_for_seconds = divisor_for_minutes % 60;
var seconds = Math.ceil(divisor_for_seconds);
var mmss = "00:00";
if (minutes < 10){
mmss = "0" + minutes }
else {
mmss = minutes };
mmss = mmss + ":"
if (seconds < 10){
mmss = mmss + "0" + seconds }
else {
mmss = mmss + seconds };
return mmss;
}},
{ "mDataProp": "callDateString",
"bUseRendered": false,
"fnRender": function ( oObj ) {
var callDateString = oObj.aData[0];
callDateString = callDateString.substring(0,8)
return callDateString ;
}},
]
[/code]
This discussion has been closed.
Replies
A console.dir( oObj.aData ) in the fnRender code might show exactly what is in each object - and you could ass a console.log( callDateString ) (etc) to ensure that you are working on the property you expect.
Allan
Now I know, it is is me/
When I run >>> console.dir( oObj.aData ) from firebug, I get
ReferenceError: oObj is not defined
Allan
When I add console.dir( oObj ) to fnRender and look at the generated log, I can find my aData entries. Now I am more confused, because they are in the the order they loaded from the json file and not the order I grabbed them with mDataProp. To add to my already confused mind, "calldirection" that worked when I used oObj.aData[0] should be oObj.aData[3].
I'm beginning to think it is a lack of understanding on my part. I thought mDataProp was creating new aData order.
I was using this same style (fnrender) to render fields that needed functional logic, but with some recent changes in dataTables mDataProp now supports functions. I have moved to this syntax and have found it to make my code and use of the library much cleaner.
It would seem the instant you start using the mDataProp property and an fnRender function in the same column definition in your aoColumns array you can't rely on using oObj.aData[oObj.iDataColumn] in your render function anymore as it will never work.
I believe this is because you can't reference the column data (oObj.aData) using an the oObj.iDataColumn index anymore.
You have to reference it via a string index as it now uses strings as the indexes on the structured data.
To get to that data in your fnRender function, when in the presence of mDataProp you have to use oObj.aData[oObj.oSettings.aoColumns[oObj.iDataColumn].mDataProp]
e.g.
So originally you would use (not using mDataProp):
[code]
'aoColumns': [
{
sName: 'Name',
sTitle: 'Name',
fnRender: function (oObj) { return oObj.aData[oObj.iDataColumn] ;}
}
]
[/code]
Now if you introduce your mDataProp :
[code]
'aoColumns': [
{
sName: 'Name',
mDataProp:'nameprop',
sTitle: 'Name',
fnRender: function (oObj) { return oObj.aData[oObj.oSettings.aoColumns[oObj.iDataColumn].mDataProp] ;}
}
]
[/code]
If i can be so bold as to make a suggestion...
Have mDataProp exposed directly in the oObj object that gets passed into the fnRender function, (the fullreference http://www.datatables.net/ref mentions mDataProp as being of multiple datatypes, integer being it's default) this would take over from iDataColumn and then some.
or you could make iDataColumn equal to mDataProp in fnRender (but that would kinda go against it's advertised datatype)
[code]
function RenderNumber(obj)
{
return parseInt(obj.aData[obj.iDataColumn]).toFixed(0);
}
[/code]
When using mDataProp, it would be very convenient to have the column's data property exposed on the fnRender argument along with iDataColumn.
If your data comes from a JSON source you should use obj.aData."PropertyName"
Good Luck
I don't quite understand that. obj.aData is the original data object that you give to DataTables for the row - it contains all of the information for the row, so as yostane notes you can just access it using standard Javascript object notation. Or have I misunderstood?
Allan
I must say, yostane, you have given me the key to a problem that has been beating my over the head for nearly a month now! *_THANK YOU!_* Accessing the data passed back from a JSON AJAX response seemed like it would be a simple task with dataTables except for that one critical piece of info: a key to the data mapping in the oObj.aData array. I must say that this case is the only one that I have come across in the last month that I have been implementing dataTables in my web app where the examples do not work as stated (in this case, from Mr. Popovic's excellent tutorial/intro to dataTables http://www.codeproject.com/KB/scripting/JQuery-DataTables.aspx).
For some reason this would not work for me in any incarnation, across multiple browsers (tested in IE8 & 9, Chrome, Firefox, Safari, and Opera), and for the life of me I could not find a straight forward key to the data mapping in this case. Allan, from a seasoned dev in many languages (Java, JavaScript, PHP, C++, C#, ObjC, VB, .NET, etc.) the only suggestion to you that I have: make the docs a bit clearer on data mapping in this case. Other wise, you have beat out most other doc sources for most anything else that I have ever come across on the web (including Google's Android dev portal!).
Thank you to every one in the dataTables community for helping me to understand how to use this wonderful plugin!