How to display image from db in to jquery datatable column

milen_mitkov

I'm new in jquery and I wan to use datatable in my way page. I manage to create the table, and populate all the needed data except the last column where I want to display the user image. For the server side I use Spring and db is mysql. I create the functionality to upload the image in to the db and to get it from there as a byte array. My problem is that I don't know how to display this image in to the datatable. This is what I have made so far: js:
[code]
$(document).ready(function(){
$('#myDataTableId').dataTable({
"sPaginationType": "full_numbers",
"bJQueryUI": true,
"bServerSide" : true,
"bProcessing": true,
"sAjaxSource": "populatePosts",
"aoColumnDefs": [
{
"aTargets":[4], //THE IMAGE COLUMN (0 base)
"fnRender": function ( data, type, row ) {
return //HOW TO RETURN THE IMAGE HERE?;
}
}
],
"fnServerData": function ( sSource, aoData, fnCallback) {
$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
});
},
"bDestroy": true
});

});

Controller

@RequestMapping(value="/populatePosts", method=RequestMethod.POST)
public @ResponseBody Map getAllPosts(){

byte[] b =(byte[]) imageDao.getImage(userId);

Object[] result = new Object[2];

result[0] = new Object[]{"col1", "col2", "col3", "col4", b};

return Collections.singletonMap("aaData", result);
}

JSP




Col1
Col2
Col3
Col4
//THIS IS THE IMAGE COLUMN




[/code]

I notice when alert the data.aoData in the datatable it prints me all the data for one row and the image there is not in bytes but in some strange chars and numbers. How can I print this image? Thanks in advice!

ashiers

Displaying images is possible. This question has been asked before. See posts:
http://datatables.net/forums/discussion/2275/how-to-display-an-image-column-when-using-json-data/p1
http://datatables.net/forums/discussion/10441/how-to-show-image-inside-a-cell/p1

I see you are on the Java platform. For more examples on how to use DataTables on the Java platform, spend some time on the JED website. http://jed-datatables.ca/jed/

milen_mitkov

Thanks for your comment! I watched this posts before ask my question. I didn't find solution to my problem in there. I try different scenarios but none of them works. Can you please point me problems that I have made in my code.
Thanks!

milen_mitkov

Problem solved!

Nana111

HI there
It is so difficult for me to display image or process the image using a code.I am a beginner in image area.I have installed an image program which supports to do any image process before:
http://www.rasteredge.com/how-to/csharp-imaging/
But it can not display image from db.So do you have any other recommendation?
Thanks a lot

nerraw93

milen_mitkov how did you solve this?

allan

Try using columns.render to create an img tag from the data.

Allan