Is it possible to show image in datatable?

bhatt_axay

Hello,

I show my data in data-table from the database. But I want to show image in the Image field when it returns form the database. Recently it show me only it's URL like below

Image

uplods/abc.jpg

Give me solution or any reference link

bhatt_axay

Okk I got the solution for it also

"columnDefs" : [{
"targets" : 6 ,
"data": "img",
"render" : function ( url, type, full) {
return '<img height="75%" width="75%" src="'+full[7]+'"/>';
}]

allan

For anyone else who reads this topic, the answer can be found in the columns.render documentation.

glenderson

Datatables is great! But, why go through the conversion of a render function? Why not pass HTML directly?

https://jsfiddle.net/glenderson/yg1w6gen/1/

This fiddle contains images, textboxes, checkboxes, images, etc.

allan

Yup - that works as well. DataTables show allow both options, since sometimes it isn't possible to have the HTML you want to be displayed in the JSON data source (a 3rd party feed for example).

Allan

bhatt_axay

Hello glenderson,

I am agree with your solution, but it is possible when my json response array is static. Here i am fetching my data from database then your solution could not help me.

Thanks for answer.

glenderson

When using a dom table, it's easy to insert the image as part of the th element.

When using a database serverside, when returning the json data, format it in the ajax page before you write the json response.

When using a scripted database, make if part of the returned value, concat('<img src="', filename, '">') as myImage

When using a static file (like .txt) file, render() is the better solution

bhatt_axay

Can u provide small example for it? so i can more clear with what u say otherwise alternate solution is i found for it.

Thanks for replay