Amal Madawa Amal Madawa - 3 months ago 15
Ajax Question

How to add multiple data to jQuery Datatable Cell

I'm using Datatables to represent data from a JSON. This is my JSON:

[{"postIMAGE": "/images/abc.jpg", "postTITLE": "Some Text", "postURL" : "blah", "postSection" : "blah"}]


This is my code:

var table = $('#tableId').DataTable({
"ajax": {
"url": "loadSiteContent",
"dataSrc": "",
data: {sectionUrl: "", siteUrl: siteurl}
},
"columns": [
{"data": "postIMAGE", "render": function (data) {
alert(data);
return '<img src=' + data + ' width="154" height="115"/>';
}},
{"data": "postTITLE"},

{"data": "postURL", "render": function (data) {
return '<a href=' + data + ' target="_blank" rel="nofollow"/>' + data + '</a>';
}}
]
});


So the view will be like this:

Enter image description here

But I want to create the table like following. How do I do that? Single column and all details in that single sell.

Enter image description here

Answer

You can use render for that:
For example:

{
    data: null,
    name: null,
    orderable: false,
    render: function (data, type, row) {
       return row.Field1 +
              "<img src='" + row.Field2 + "' />";           
    }
},

In other word, you create single column and show all data into it by using row.fieldName like top example.
I hope this be useful.