How to put multiple data in a datatable column?

Question

I'm using Datatables to represent data from a JSON. My JSON is as follows:

[{"name": "John Doe", "email": "john@gmail.com", "address" : "blah"}]

In Datatables I can easily show these 3 pieces of info in 3 diff columns using the following:

columnDefs = [ 
                { "mData": "name", "aTargets":[0] },
                { "mData": "email", "aTargets":[1] },
                { "mData": "address", "aTargets":[2] }
             ];

But the problem is that I want to show "name" and "email" in 1st column and then "address" in the 2nd column. How can I do that? Please guide.

see here http://www.datatables.net/forums/discussion/13321/mdata-with-function-on-multiple-columns/p1 — PSR, Mar 02 '13 at 12:48
This one is also helpful: http://stackoverflow.com/questions/19777075/datatables-merge-columns-together — , May 18 '14 at 15:05

score 17 · Answer 1 · answered Apr 24 '18 at 14:32

columnDefs = [ 
            { 
             data: {name : "name", email : "email", address : "address"},
             mRender : function(data, type, full) {
                return data.name+' '+data.email+' '+data.address; 
              } 
            }
         ];

The above code can render multiple data in a column of a datatable.

score 16 · Answer 2 · answered Feb 13 '17 at 06:47

16

to make it more short, you can write it like this

"aoColumns": [
    { "mData": "i_id" },
    { "mData": "i_name" },
    { "mData": function (data, type, dataToSet) {
        return data.i_id + "<br/>" + data.i_name;
    }}
],

and the result

answered Feb 13 '17 at 06:47

Sruit A.Suk

7,073
7
61
71

score 14 · Answer 3 · answered Feb 19 '14 at 12:50

Rather than putting either the name or e-mail in the first column in the column definition, you can use a function to get and print whatever data you want. See the mData section on this page for more details: https://datatables.net/usage/columns. In my example below I use aoColumns because I tested my answer that way; but in the link referenced they used aoColumnDefs and provide elaboration on the type and dataToSet fields. This approach should hopefully help anyone reading this answer whether you use aoColumns or aoColumnDefs.

For example, using aoColumns rather than aoColumnDefs:

aoColumns = [ 
    { "mData": getNameAndEmail },
    { "mData": "address" }
];

Then define the getNameAndEmail function in JavaScript scope which takes three parameters: the data passed back, the type of action on the data, and if the type is "set" then the data to set.

function getNameAndEmail(data, type, dataToSet) {
    return data.name + "<br>" + data.email;
}

score 7 · Answer 4 · answered Apr 02 '19 at 21:54

7

[You can use syntax like this:
It worked for me.]
"columnDefs":[{ "targets":0,//column index "data":"first_name", "render":function(data,type,row){ return data+' '+row['last_name']; } }]

[thanks]

answered Apr 02 '19 at 21:54

java graduates

71
1
2

I'm using server side datatable, so the other answers didn't work for me. Only your answer helped me. Thank you. – Taian May 30 '19 at 14:17
I found this answer to be very helpful. Thank you. – Del Sep 12 '22 at 13:59

How to put multiple data in a datatable column?

4 Answers4