CODEWITHSUNDEEP
jqueryajaxdatatable
Lynx
Lynx

Reputation: 1482

Show two objects in one AJAX datatable column

I am using jQuery datatables to output data via Ajax and SQL. I can output the data fine. However, I would like to combine two of the return objects into one column as it pertains to the same thing. 

$('#todayApt').on('show.bs.modal', function (event){
    $('#todayAptList').DataTable( {
        "ajax": {
            "url": '{{ url('panel/appointment/ajax/schedule/week/lookup') }}',
            dataSrc: ''
        },
        "columns": [
            { "data": "date" },
            { "data": "office" },
            { "data": "block" },
            { "data": "last_name" },
            { "data": "street_1" },
            { "data": "zip_code" },
            { "data": "phone_1" },
            { "data": "service_detail" }
        ]
    } );
});

My object is as follows:

[  
   {  
      "street_1":"1234 Main St",
      "phone_2":"(555) 555-5555",
      "street_2":null,
      "date":"2016-10-19",
      "users_info_id":19,
      "last_name":"Doe",
      "phone_1":"(555) 555-5555",
      "zip_code":90210,
      "status":"scheduled",
      "office":"location",
      "block":"9-12",
      "special_detail":null,
      "mp_detail":null,
      "service_detail":"Service Details"
   }
]

So service_detail, mp_detail and special_detail I would like to just be in one single column labeled 'Details'. I can figure out how to do single columns but cannot figure out how to do more than one in only one column

Example of expected results:

<table id="todayAptList" class="table table-striped table-bordered dt-responsive" cellspacing="0" width="100%">
    <thead>
    <tr>
        <th>Date</th>
        <th>Office</th>
        <th>Block</th>
        <th>Last Name</th>
        <th>Address</th>
        <th>Zip Code</th>
        <th>Phone</th>
        <th>Services</th>
    </thead>
    <tbody>
   <tr role="row" class="odd">
      <td class="sorting_1" tabindex="0">2016-10-18</td>
      <td>Location</td>
      <td>3-5</td>
      <td>Doe</td>
      <td>1234 Main St</td>
      <td>90210</td>
      <td>(555) 555-5555</td>
      <td>SPECIAL, MP AND SERVICE DETAILS HERE IN ONE</td>
   </tr>
</tbody>

Upvotes: 1

Views: 3258

Answers (1)

FranksBrain
FranksBrain

Reputation: 815

You should be able to do this using the renderer (columns.render). See here for reference: DataTable Renderers

Basically you use the renderer to transform data from the original object. You could do something like this in the column that you'd like the combined info (untested, but I just modified some code I used to do the exact same thing earlier today):

$('#todayApt').on('show.bs.modal', function (event){
$('#todayAptList').DataTable( {
    "ajax": {
        "url": '{{ url('panel/appointment/ajax/schedule/week/lookup') }}',
        dataSrc: ''
    },
    "columns": [
        { "data": "date" },
        { "data": "office" },
        { "data": "block" },
        { "data": "last_name" },
        { "data": "street_1" },
        { "data": "zip_code" },
        { "data": "phone_1" },
        { 
            "data": null, 
            render: function (data, type, row) {
                        var details = row.service_detail + " " + row.mp_detail + " " + row.special_detail;
                        return details;
                    }
        }
    ]
});

I used the last column for this example. The row parameter should contain the original json object.

Upvotes: 2

Related Questions