jquery-Datatable-Zeile Gruppieren

Ich bin mit jQuery DataTables (version 1.7.6). Ich möchte die Gruppe in zwei Reihen hintereinander, so kann ich ein edit-option für beide Zeilen.

Hier ist meine Tabelle:

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

Hier ist mein Skript, verabschiedet von der DataTable-docs in der Zeile gruppieren

$(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'
  });
});

Ich bin auf der Suche für eine Ausgabe wie diese:

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

InformationsquelleAutor Gowri | 2011-03-05