将Datatables.js与隐藏的子行一起使用会产生排序问题

如何解决将Datatables.js与隐藏的子行一起使用会产生排序问题

我正在尝试显示过去三个会计年度中给定业务的报价。

现在，我想显示按月细分。我创建了一个展开图标，该图标按月显示每个公司下的隐藏子行。

通过直接在已填充的表上调用DataTable插件来生成数据表。到目前为止，我已经正确地构建了表，公司行及其子行（默认情况下是隐藏的）。单击展开图标会正确显示子行。

问题，现在是为了将适当的子行保留在其各自的父行（及其下）之下，我不得不添加一个隐藏列，使用datatable orderFixed选项对其进行排序。

var quoteCompareTable = $("#iQCDatatable").DataTable({ 
    paging    : false,info      : false,ordering  : true,orderFixed: [5,'asc'],columnDefs: [{ targets: -1,visible: false}],initComplete: function (oSettings) {
        $("#iQCDatatable tr.child-row").hide();
    },});

表的一般结构为（html）：

<table class="table table-striped table-inverse" id="iQCDatatable">
  <thead>
    <tr>
      <th>Company</th>
      <th>2019</th>
      <th>2020</th>
      <th>2021</th>
      <th>Total</th>
      <th></th>
    </tr>
 </thead>
 <tbody>
  <tr class='parent-row'>
    <td><span class='show-child' data-colid='1'>+</span> USA</td>
    <td>300</td><td>300</td><td>275</td><td>875</td><td>USA</td>
  </tr>
  <tr class='child-row' data-colid='1'>
    <td>Quarter 1</td><td>75</td><td>55</td><td>60</td><td></td><td>USA1</td>
  </tr>
  <tr class='child-row' data-colid='1'>
    <td>Quarter 2</td><td>80</td><td>80</td><td>74</td><td></td><td>USA1</td>
  </tr>
  <tr class='child-row' data-colid='1'>
    <td>Quarter 3</td><td>98</td><td>90</td><td>87</td><td></td><td>USA1</td>
  </tr>
  <tr class='child-row' data-colid='1'>
    <td>Quarter 4</td><td>47</td><td>75</td><td>54</td><td></td><td>USA1</td>
  </tr>
 </tbody>
</table>

这是问题所在：排序在列上进行，但仅在子行内进行。父行不会排序（此示例仅显示一个父行，但是我的代码中有几行）。

这是我使用的简化版本的链接：https://jsfiddle.net/D_Lux/ycx42wfe/1/ 如果您尝试对列进行排序，则父行将不会排序，但是展开子行将显示它们正确。

我尝试仅使子行在列内成为一个单独的表，并使用Datatables的响应功能将其隐藏。但是由于子表中的列与主表中的列完全相同，因此看起来确实很糟糕。我还尝试使用orderFixed的pre / post排序选项，但是排序时会导致布局错误。

我的问题是：有办法吗？是否有我完全没有想到的完全不同的方法，或者我在文档中错过了某些方法来做到这一点？我能想到的唯一实现目标的方法是使展开图标只是一个模式链接，该模式按月显示数据，而不是在主表中显示并完全绕开数据表问题。 / p>