Question

我正在使用此Datatables Demo来显示子行。我正在使用PHP返回一个数组或数据。我的功能非常好，但有一些问题。

这是我目前所拥有的图像。 enter image description here

如图所示，有两个父行具有相同的问题，子行具有不同的答案。

1。我需要一种方法来限制每个不同问题的一个父行。

2。我还需要一种循环方式并在同一子表中显示多个子行。

第3。另一个选项是如何将数据分配给父行，将另一组数据分配给子行。

我知道我应该在我的查询中执行此操作，但问题列在两个单独的表中是单个到多个结果。使用查询执行此操作的唯一方法是返回问题的一个结果，然后再进行另一个ajax调用以填充子行。我认为这会更容易。

CODE：

表：

<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();

查询结果：

enter image description here

问题栏只是针对每个答案重复。其余的列是不同的。

Answer 1

这是一个常见问题，你可以在查询方面或语言方面解决它。在这种情况下，我更喜欢语言方面。您可以尝试做什么：

按问题文本命令您查询;
检查上一个和实际的问题是否具有相同的文字;
如果是，请将答案添加到实际问题中;
否则，请创建一个新的问题条目。

你必须编辑你的格式化功能才能做到这一点，我建议你将它分成两部分，一部分带有问题标题，另一部分带有答案数据，然后你可以控制：渲染或不标题。 / p>

Jquery数据表父子数据

1 个答案: