Показать два объекта в одном столбце данных AJAX

Question

Я использую jQuery datatables для вывода данных через Ajax и SQL. Я могу выдавать данные в порядке. Однако я хотел бы объединить два возвращаемых объекта в один столбец, поскольку он относится к одной и той же вещи.

$('#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" } 
     ] 
    }); 
}); 

Мой объект выглядит следующим образом:

[ 
    { 
     "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" 
    } 
] 

Так service_detail, mp_detail и special_detail Я хотел бы только быть в одном столбце 'Подробности'. Я могу понять, как сделать одиночные столбцы, но не могу понять, как сделать больше, чем один только в одном столбце

Пример ожидаемых результатов:

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

Answer 1

Вы должны быть в состоянии сделать это с помощью визуализации (columns.render). См. Здесь для справки: DataTable Renderers

В основном вы используете средство визуализации для преобразования данных из исходного объекта. Вы могли бы сделать что-то подобное в столбце, который вы хотите комбинированную информацию (непроверенным, но я только изменил код, который я использовал, чтобы сделать то же самое ранее сегодня):

$('#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; 
        } 
     } 
    ] 
}); 

Я использовал последний столбец для этого примера. Параметр row должен содержать оригинальный json-объект.