CODEWITHSUNDEEP
jquerydatatable
Romain
Romain

Reputation: 105

Integrate img HTML tag into datatable

I just started using Datatable and I'm confused about something. I can't seem to integrate an image HTML tag inside a cell. It's about the column.render I think, but I guess I'm a bit overwhelmed by the doc because I still haven't figured out how to do it.

Here is my code, path return the URL of an image.

$('#table_id').DataTable({
   "processing": true,
    "ajax": {
        "url": "req.php",
        "type": "POST"
    },
    "columns": [
        { "data": "id" },
        { "data": "path" },
        { "data": "type" },
        { "data": "keywords" }
    ]
} );

And what I'm trying to do at the moment.

$('#table_id').DataTable({
   "processing": true,
    "ajax": {
        "url": "req.php",
        "type": "POST"
    },
    "columns": [
        { "data": "id" },
        { "data": "path" },
            "render": function ( data, type, full, meta ) {
             return '<img src="'+data+'">';
        { "data": "type" },
        { "data": "keywords" }
    ]
} );

I'm looking forward to finding someone who can get me out of my ignorance.

Have a nice day :)

Upvotes: 3

Views: 178

Answers (1)

Douwe de Haan
Douwe de Haan

Reputation: 6656

The render property is outside of the object where your "data":"path" is.

You have this code for your rendering now:

"columns": [
    { "data": "id" },
    { "data": "path" },
        "render": function ( data, type, full, meta ) {
         return '<img src="'+data+'">';
    { "data": "type" },
    { "data": "keywords" }
]

You should rewrite it like this:

"columns": [
    { "data": "id" },
    { "data": "path",
      "render": function ( data, type, full, meta ) {
          return '<img src="'+data+'">';
      }
    },
    { "data": "type" },
    { "data": "keywords" }
]

Upvotes: 2

Related Questions