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": "[email protected]", "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.

Answer 1

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

Answer 2

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;
}