是否可以按分组列标题排序jquery数据表。如果是这样，从哪里开始？

Question

class ='sorting'我有一个表格，我在标签中添加了一个额外的行，我用它来表示它下面的列的分组。

我想通过分组行（顶行）添加排序，例如，当单击“组1”时，它会按该组下的列对表进行排序（例如col1，col2，然后是col3）。

我甚至不确定这是否可以在数据表中天真地使用。我宁愿避免jquery hack。我的搜索只生成了行分组的结果。

datatables版本：1.10.0-beta.1

jsfiddle：https://jsfiddle.net/mrgulick/usfo2gys/4/

<div id="demo">
  <table cellpadding="0" cellspacing="0" border="0" width="100%" class="display" id="example">
    <thead>
      <tr>
        <th></th>
        <th colspan="3" style="background-color:green;border:solid thin;"  class='sorting'>Group 1</th>
        <th colspan="3" style="background-color:blue;border:solid thin;"  class='sorting'>Group 2</th>
        <th colspan="2" style="background-color:red;border:solid thin;"  class='sorting'>Group 3</th>
      </tr>
      <tr>
        <th style="background-color:gray;border:solid thin;">ungrouped</th>
        <th style="background-color:green;border:solid thin;">col 1</th>
        <th style="background-color:green;border:solid thin;">col 2</th>
        <th style="background-color:green;border:solid thin;">col 3</th>
        <th style="background-color:blue;border:solid thin;">col 4 </th>
        <th style="background-color:blue;border:solid thin;">col 5</th>
        <th style="background-color:blue;border:solid thin;">col 6</th>
        <th style="background-color:red;border:solid thin;">col 7</th>
        <th style="background-color:red;border:solid thin;">col 8</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>string value 1</td>
        <td style="text-align: center;">
          <input type="checkbox" checked />
        </td>
        <td style="text-align: center;">
          <input type="checkbox" />
        </td>
        <td style="text-align: center;">
          <input type="checkbox" checked />
        </td>
        <td style="text-align: center;">
          <input type="checkbox" />
        </td>
        <td style="text-align: center;">
          <input type="checkbox" />
        </td>
        <td style="text-align: center;">
          <input type="checkbox" checked />
        </td>
        <td style="text-align: center;">
          <input type="checkbox" />
        </td>
        <td style="text-align: center;">
          <input type="checkbox" checked />
        </td>
      </tr>
      <tr>
        <td>string value 2</td>
        <td style="text-align: center;">
          <input type="checkbox" />
        </td>
        <td style="text-align: center;">
          <input type="checkbox" checked />
        </td>
        <td style="text-align: center;">
          <input type="checkbox" />
        </td>
        <td style="text-align: center;">
          <input type="checkbox" checked />
        </td>
        <td style="text-align: center;">
          <input type="checkbox" checked />
        </td>
        <td style="text-align: center;">
          <input type="checkbox" />
        </td>
        <td style="text-align: center;">
          <input type="checkbox" />
        </td>
        <td style="text-align: center;">
          <input type="checkbox" checked />
        </td>
      </tr>
      <tr>
        <td>string value 2</td>
        <td style="text-align: center;">
          <input type="checkbox" checked/>
        </td>
        <td style="text-align: center;">
          <input type="checkbox"  />
        </td>
        <td style="text-align: center;">
          <input type="checkbox" checked/>
        </td>
        <td style="text-align: center;">
          <input type="checkbox"  />
        </td>
        <td style="text-align: center;">
          <input type="checkbox"  checked/>
        </td>
        <td style="text-align: center;">
          <input type="checkbox" checked/>
        </td>
        <td style="text-align: center;">
          <input type="checkbox" checked/>
        </td>
        <td style="text-align: center;">
          <input type="checkbox"  />
        </td>
      </tr>
    </tbody>
  </table>
</div>

以下

var dt = $('#example').DataTable(dtOptions);

var dtOptions = {
  "dom": '<"clearfix"><"pull-left"l><"pull-right"Bf>r<"horizontal-scroll"t><"pull-left"i><"pull-right"p><"clearfix">',
  "order": [],
  "columnDefs": [{
    "targets": [0],
    "visible": true,
    "searchable": true
  }],
  "aoColumns": [
    null, {
      "orderSequence": ["desc", "asc"]
    }, {
      "orderSequence": ["desc", "asc"]
    }, {
      "orderSequence": ["desc", "asc"]
    }, {
      "orderSequence": ["desc", "asc"]
    }, {
      "orderSequence": ["desc", "asc"]
    }, {
      "orderSequence": ["desc", "asc"]
    }, {
      "orderSequence": ["desc", "asc"]
    }, {
      "orderSequence": ["desc", "asc"]
    }
  ]
}