JQuery Datatables Данные родительского ребенка

Question

Я работаю с этим Datatables Demo для отображения дочерних строк. И я использую php для возврата массива или данных. У меня это работает очень хорошо, но есть несколько вопросов.

Вот изображение того, что у меня есть.

Как вы видите на рисунке, есть две родительские строки с одним и тем же вопросом, а дочерние строки с разными ответами.

1. Мне нужен способ ограничить одну родительскую строку для каждого отдельного вопроса.

2. Мне также нужен способ прокрутки и отображения нескольких дочерних строк в одной и той же дочерней таблице.

3. Другим вариантом является назначение данных родительским строкам и другому набору данных дочерним строкам.

Я знаю, что должен сделать это в моем запросе, но столбец вопросов является однозначным для многих результатов в двух отдельных таблицах. Единственный способ сделать это с запросами - вернуть один результат для вопросов, а затем сделать еще один вызов ajax для заполнения дочерних строк. Я предполагал, что это будет проще.

КОД:

Таблица:

<table id="car" class="display" cellspacing="0" width="100%"> 
     <thead> 
     <tr> 
      <th class="details-control" style="max-width: 80px;">Expand</th> 
      <th>Question</th> 
     </tr> 
     </thead> 
     <tbody> 
     </tbody> 
     <tfoot> 
      <tr> 
      <th></th> 
      <th>Question</th> 
      </tr> 
     </tfoot> 
     </table> 

Сценарий:

function format(d) { 
     //d is the original data object for the row 
     var tbl = '<table cellpadding="5" cellspacing="0" border="0" style="margin-left:110px; width:100%; font-size:12px;">' + 
       '<tr>' + 
       '<th style="width:60%; color:3383bb;">Answer Choices</th>' + 
       '<th style="width:15%; color:3383bb;"># of Answers</th>' + 
       '<th style="width:15%; color:3383bb;">Percentage</th>' + 
       '</tr>' + '<tr>' + 
       '<td>' + d.Answer + '</td>' + 
       '<td>' + d.NumberOfAnswers + '</td>' + 
       '<td>' + d.Percent + '</td>' + 
       '</tr>' + '</table>'; 
     return tbl; 
    } 


    var table2 = $('#car').DataTable({ 
     "ajax": "/rmsicorp/clientsite/reset/survey/surveyajax.php", 
     "scrollY": "400px", 
     "paging": false, 
     "bAutoWidth": true, 
     "columns": [ 
      { 
       "className": 'details-control', 
       "orderable": false, 
       "data": null, 
       "defaultContent": '' 
      }, 
      { "data": "Question" }, 
     ], 
    }).columns.adjust().draw(); 

Результат запроса:

Эта колонка вопроса просто повторяется для каждого ответа. Остальные столбцы различны.

Answer 1

Это обычная проблема, вы можете решить ее на стороне запроса или на стороне пользователя. В этом сценарии я предпочитаю языковую сторону. Что вы можете попытаться сделать:

1. Запросить запрос по тексту вопроса;
2. Проверьте, действительно ли последний и фактический вопрос имеет один и тот же текст;
3. Если да, добавьте ответ на фактический вопрос;
4. В противном случае создайте новую запись вопроса.

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