jquery 数据表行分组答案

【问题标题】：jquery Datatable Row Groupingjquery 数据表行分组
【发布时间】：2011-03-05 14:02:02
【问题描述】：

我正在使用 jQuery DataTables（版本 1.7.6）。我想对两个连续的行进行分组，这样我就可以为这两行设置一个编辑选项。

这是我的桌子：

<table class="display" id="specificproduct_table"
       width="100%" cellpadding="0" cellspacing="0" border="0" >
  <thead>
    <tr>
      <th width="7%">column1</th>
      <th width="16%">column2</th>
      <th width="5%">Edit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="5" class="dataTables_empty">
        Loading data from server
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>column1</th>
      <th>column2</th>
      <th width="5%">Edit</th>
    </tr>
  </tfoot>
</table>

这是我的脚本，来自DataTable docs on Row grouping

$(function() {
  var oTable = $('#specificproduct_table').dataTable({
    "aoColumns": [{
      "sClass": "nonedit"
    }, {
      "sClass": "nonedit"
    }, {
      "sClass": "nonedit",
      "bSortable": false
    }, ],
    "bProcessing": true,
    "bServerSide": true,
    "bJQueryUI": true,
    "sPaginationType": "full_numbers",
    "sAjaxSource": "ajax_shotgun_table",
    "fnDrawCallback": function(oSettings) {
      if (oSettings.aiDisplay.length == 0) {
        return;
      }

      var nTrs = $('tbody tr', oSettings.nTable);
      var iColspan = nTrs[0].getElementsByTagName('td').length;
      var sLastGroup = "";
      for (var i = 0; i < nTrs.length; i++) {
        var iDisplayIndex = oSettings._iDisplayStart + i;
        var sGroup = oSettings.aoData[oSettings.aiDisplay[iDisplayIndex]]._aData[0];
        if (sGroup != sLastGroup) {
          var nGroup = document.createElement('tr');
          var nCell = document.createElement('td');
          nCell.colSpan = iColspan;
          nCell.className = "group";
          nCell.innerHTML = sGroup;
          nGroup.appendChild(nCell);
          nTrs[i].parentNode.insertBefore(nGroup, nTrs[i]);
          sLastGroup = sGroup;
        }
      }
    },
    "aoColumnDefs": [{
      "bVisible": false,
      "aTargets": [0]
    }],
    "aaSortingFixed": [
      [0, 'asc']
    ],
    "aaSorting": [
      [1, 'asc']
    ],
    "sDom": 'lfr<"giveHeight"t>ip'
  });
});

我正在寻找这样的输出：

<table width="98%" border="0">
  <tr>
    <td>column1</td>
    <td>column2</td>
    <td>Edit</td>
  </tr>
  <tr>
    <td>product A </td>
    <td>A</td>
    <td rowspan="2">edit</td>
  </tr>
  <tr>
    <td>product A 1 </td>
    <td>A</td>
  </tr>
  <tr>
    <td>product B </td>
    <td>B</td>
    <td rowspan="2">edit</td>
  </tr>
  <tr>
    <td>product B 1 </td>
    <td>B</td>
  </tr>
  <tr>
    <td>product C </td>
    <td>C</td>
    <td rowspan="2">edit</td>
  </tr>
  <tr>
    <td>product C 1 </td>
    <td>C</td>
  </tr>
</table>

【问题讨论】：

标签： jquery jquery-plugins datatables

【解决方案1】：

目前 (1.7.6) dataTables 不支持 col 或 rowspan

您可能可以使用 fnDrawCallback 遍历表格并用两个新行替换最后一个单元格的行跨度的每两行，因为在绘制表格后调用 fnDrawCallback（它会导致重绘）

不确定它会如何处理排序/搜索

【讨论】：

【解决方案2】：

fnFakeRowspan() 函数可以做到这一点，大概

这里是链接：http://datatables.net/plug-ins/api#fnFakeRowspan

【讨论】：