How to add multiple json values in a single cell of dataTable

Question

How to add multiple json values in a single cell of dataTable. I am going through the datatables documentation but cant get a clear example.

I have the following JSON string which I am accessing it through a session into a dataTable.

<textarea id="Report" type="text" style="" name="Report">
    [
    {
    "Identifier": "0",
    "LastName": "Cooper",
    "FirstName": "Benny",
    "MiddleInitial": "P",
    "MRN": "7854753",
    "Age": "30",
    "Gender": "Female",
    "Location":
        {
            "Bed": "1",
            "Room": "A",
            "unit": "NU1",
            "facility": "Fac1"
        },
    "ServiceDate":"05/03/2013",
    "ChargeAndDx":"99222 - 410.01,428",
    "BillingProvider":"Palmer, James",
    "title":"Add",
    "start":"2013-08-07",
    "url":"#",
    "textColor":"red"
    }] </textarea>

on the other page where I am accessing the session in the datatable is aas follows:

$(document).ready(function (){

var ReportData=JSON.parse(document.getElementById("Report").innerHTML);
        Report=$('#patientDataTables').dataTable
        ({
            "bJQueryUI":true,
            "bScrollCollapse":true,
            aaData:patientReportData,
            "aoColumns":
                [   {"mData":"LastName","sClass":"left"},
                    {"mData":"ServiceDate","sClass":"left"},
                    {"mData":"ChargeAndDx","sClass":"left"},
                    {"mData":"BillingProvider","sClass":"left"},
                    {"mData":"null","sClass":"center","sDefaultContent":"<a href='' class='editor_menu'>menu</a>"}

                ]
        });

In my datatable where the LastName appears I want the FirtName, Middle Initial, MRN and age as well.

How is that done. If some one knows a quick way to do this.

tduchateau · Accepted Answer · 2015-04-16 15:56:24Z

32

Prior to DataTables 1.10.x, you could use the mRender parameter like this:

"aoColumns":[   
   {"mData":"LastName",
    "sClass":"left", 
    "mRender":function(data, type, full){
       return full.FirstName + full.LastName + full.MiddleInitial;
    }
   },
   {"mData":"ServiceDate","sClass":"left"},
   {"mData":"ChargeAndDx","sClass":"left"},
   {"mData":"BillingProvider","sClass":"left"},
   {"mData":"null","sClass":"center","sDefaultContent":"<a href='' class='editor_menu'>menu</a>"}
]

Starting from DataTables 1.10.x, you could use the columns.render property like this:

"columns":[   
   {"data":"LastName",
    "className":"left",
    "render":function(data, type, full, meta){
       return full.FirstName + full.LastName + full.MiddleInitial;
    }
   },
   {"data":"ServiceDate","sClass":"left"},
   {"data":"ChargeAndDx","sClass":"left"},
   {"data":"BillingProvider","className":"left"},
   {"data":"null","className":"center","defaultContent":"<a href='' class='editor_menu'>menu</a>"}
]

edited Apr 16, 2015 at 15:56

answered Aug 6, 2013 at 21:25

tduchateau

4,5013 gold badges32 silver badges41 bronze badges

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

3 Comments

patz Over a year ago

Thank you for the response. Till the time I waited for a response I tired an alternative and Cloned the JSON string. Got the FirstName and LastName and Middle initial in a single object/field and then passed it to the dataTable. But I will try this. This looks like and easy alternative.

Genaut Over a year ago

Works but You should use "data" parameter, setted with the current row of the JSON array that you have, because in case you have more rows full will contain all objects, not only the current row. Thanks

José Manuel Blasco Over a year ago

Great answer! In addition: If you need those fields to be searchable you can add them in other columns with the parameter 'visible' to 'false' and 'searchable' to 'true'. This way you will see all data in a column but it will still being searchable.

Collectives™ on Stack Overflow

How to add multiple json values in a single cell of dataTable

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related