How to add multiple data to jQuery Datatable Cell

Question

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:

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

Datatables is meant for tabular data. What you want is not tabular, so Datatables is not the right job for this. — Eric Guan
– Eric Guan, Commented Aug 25, 2016 at 5:01

Majid Basirati · Accepted Answer · 2016-08-25 06:44:06Z

2

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.

edited Aug 25, 2016 at 6:44

answered Aug 25, 2016 at 6:34

Majid Basirati

2,9053 gold badges27 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to add multiple data to jQuery Datatable Cell

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related