Replace Returned Ajax Json Subarray Result with an Icon or Image

Jmobi

I am working with the Ajax Json Subarray Object Example and using DataTables 1.8.2:

http://datatables.net/release-datatables/examples/ajax/objects_subarrays.html

I want to detect the value of the "details" subarray and replace that with an image and html. The problem is that I cannot grab the value of the oObj when using mDataProp and a custom function for fnRender. I have read several articles on the forum about using a callback, or just using the syntax for the Json directly, but I cannot get those to work either.

In the following example, I want to detect if the value from 'details' is "4" or "X" and then replace that with the appropriate image inside the .

JSON Array
[code]
{
"aaData": [
{
"engine": "Trident",
"browser": "Internet Explorer 4.0",
"platform": "Win 95+",
"details": [
"4",
"X"
]
}
}
[/code]

JQ
[code]
$(document).ready(function() {

var oTable = $('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": "sources/objects_subarrays.txt",
"aoColumns": [
{ "mDataProp": "engine" },
{ "mDataProp": "browser" },
{ "mDataProp": "details", "sWidth": 30, fnRender: make_table_icons, "bSortable": false, "bSearchable": false }
]
} );

function make_table_icons(oObj) {

//Need syntax for following logic

//if details value == "4" then
return "";

//if details value == "X" then
return "";

}
} );
[/code]

Then in my table, I want to display the icons for all of the results of the details array in one
[code]



Rendering engine
Browser
Details







[/code]

allan

> I cannot grab the value of the oObj when using mDataProp and a custom function for fnRender

You can do this in DataTables 1.8, but I think this might be an ideal case for you to grab the current nightly (or rather, grab the 1.9 beta 1 release then update to the nightly) as in that you will get a second parameter passed into fnRender - the value for the "cell", in this case your array. This way you will have direct access to the data for that cell, rather than mucking around with oObj.aData (which is where you would find the data).

The other option is to use mDataProp as a function - then you will get the origin data source object/array for the row and you can manipulate that however you want.

Allan

Jmobi

Thanks for the comment.

Is mucking around with the oObj.aData something you could demonstrate for me using the above example?

I certainly plan to update to 1.9, but I've already built the app using 1.8.2 and I just need this final little bit to finish up.

Thanks again for your support., This is really one of the best plugins I have ever come across (well documented, logical and intuitive, extensible).

allan

[code]
return oObj.aData.details[0];
[/code]

would return 4 :-)

Allan

Jmobi

Thank you. I'll check out that Nightly Build for 1.9 too. Sounds promising!