jquery 数据表行分组

Question

我正在使用 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 文档

$(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>

Answer 1

目前（1.7.6）dataTables 不支持 col 或 rowspan，

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

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

Answer 2

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

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