How to display an image column when using JSON data

moshfegh

Hello,

I'm planning to use DataTables plug-in with JSON data returned from the server. Could you please advise me on how I can display non-text elements in a column (like image, hyperlink, etc)?

This is extremely simple when I use DataTables with DOM. I render my table the way I want to, and then have it converted to a DataTable. But I don't know how to achieve the same thing when using JSON as the data source.

Any advice would be greatly appreciated.

Mosh

Lobo

I use a thing like this in aoColumnDefs:
[code]
...,
{"sTitle": "CountryFlag", "sWidth": "1%","sClass":"center","bSortable": false,"aTargets": [ 9 ],
"fnRender": function(obj) {
var sReturn = obj.aData[ obj.iDataColumn ];
sReturn=trtFlag(sReturn);
return sReturn;
}
,"bUseRendered": false
},...
[/code]

with trtFlag js like this :
[code]
function trtFlag(sData){
var sReturn;
var p=sData .split(';');
var racine='';
sReturn=sprintf(racine,p[1],p[0]);
return sReturn;
}
[/code]
Note : I use a server-side processing.
Note 2: for sprintf in js i use : http://www.diveintojavascript.com/projects/sprintf-for-javascript

jjmccaw

Hey guys,
sorry to bump an old thread but i have a question on this i was hoping someone could help me out with.
a json row looks like this:
["15","Company","NY","Cat","Local",null,"User","Status",["imgloc^Edit^15","imgloc^Delete^15"]]

the class of that last column (th) is called 'tablebutton'. trying to set that last array to a group of clickable images

in my data table definition i have:
[code]
"aoColumnDefs": [{ "aTargets": ["tablebutton"], "fnRender": function (obj) {
var sReturn = obj.aData[obj.iDataColumn];
sReturn = MakeButton(sReturn);
return sReturn;
}
, "bUseRendered": false
}],
[/code]

MakeButton looks like this:
[code]
function MakeButton(sData) {
var p = sData.split('^');
var mylink = '';
return mylink;
}
[/code]

now if i make that last column in JSON a single item (as in not an array of objects), it loads fine, but i want both Edit and Delete to show up in a single column (they are dynamic, could be anywhere between 0 and 4 items). i'm guessing that i should be going through obj.aData[obj.iDataColumn] like its an array but cant seem to get the syntax right. any help would be appreciated!

jjmccaw

in case anyone is searching for this, what i ended up doing is adding the html in my json object. i.e. the json now looks like this:

["15","Company","NY","Cat","Local",null,"User","Status",["", "img src='blah2.jpg'>"]] and removed the columnDef attribute and MakeButton function