jquery數據錶行分組

我正在使用jQuery DataTables（版本1.7.6）。我想將兩個連續的行組合起來，這樣我就可以對兩行都有編輯選項。jquery數據錶行分組

這裏是我的表：

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

來源

2011-03-05 Gowri