jquery Datatable Row Grouping

Question

I'm using jQuery DataTables (version 1.7.6). I'd like to group two consecutive rows so I can have an edit option for both rows.

Here's my table:

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

Here's my script, adopted from the 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'
  });
});

I'm looking for output like this:

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

hpacheco hpacheco · Accepted Answer · 2011-03-07T16:17:47

at the moment (1.7.6) dataTables doesn't support col or rowspan

you could probably use fnDrawCallback to go through the table and replace every two lines with two new lines with a rowspan for the last cell, as fnDrawCallback is invoked after the table is drawn (it will cause a redraw)

not sure how it would handle sorting/searching

jquery Datatable Row Grouping

2 Answers