JQuery DataTables合併同一行數據

Question

我正在使用Jquery DataTables.net。 我想在數據表合併重複的值，例如，我有：

-------------------------------------------- 
     A   |   1  |  2 
-------------------------------------------- 
     A   |   1  |  4 
-------------------------------------------- 
     A   |   2  |  5 
-------------------------------------------- 

我想他們是這樣的：

--------------------------------------------- 
        |    |  2 
        |   1  |--------- 
     A   |    |  4 
        |---------------|--------- 
        |   2  |  5 
--------------------------------------------- 

我怎麼能做到這一點在數據表jQuery的？ 謝謝。

Answer 1

我們需要在HTML表格中處理這個..請看下面的概念。

$(document).ready(function() { 
 
    $('#example').dataTable(); 
 
    MergeGridCells(); 
 
}); 
 

 
function MergeGridCells() { 
 
    var dimension_cells = new Array(); 
 
    var dimension_col = null; 
 
    var columnCount = $("#example tr:first th").length; 
 
    for (dimension_col = 0; dimension_col < columnCount; dimension_col++) { 
 
     // first_instance holds the first instance of identical td 
 
     var first_instance = null; 
 
     var rowspan = 1; 
 
     // iterate through rows 
 
     $("#example").find('tr').each(function() { 
 

 
      // find the td of the correct column (determined by the dimension_col set above) 
 
      var dimension_td = $(this).find('td:nth-child(' + dimension_col + ')'); 
 

 
      if (first_instance == null) { 
 
       // must be the first row 
 
       first_instance = dimension_td; 
 
      } else if (dimension_td.text() == first_instance.text()) { 
 
       // the current td is identical to the previous 
 
       // remove the current td 
 
       dimension_td.remove(); 
 
       ++rowspan; 
 
       // increment the rowspan attribute of the first instance 
 
       first_instance.attr('rowspan', rowspan); 
 
      } else { 
 
       // this cell is different from the last 
 
       first_instance = dimension_td; 
 
       rowspan = 1; 
 
      } 
 
     }); 
 
    } 
 
}

<link rel="stylesheet" type="text/css" href="//ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css"> 
 
<link rel="stylesheet" type="text/css" href="//ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css"> 
 
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script> 
 
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script> 
 
<div class="container"> 
 
    <table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example"> 
 
     <thead> 
 
      <tr> 
 
       <th>Rendering engine</th> 
 
       <th>Browser</th> 
 
       <th>Platform(s)</th> 
 
       <th>Engine version</th> 
 
       <th>CSS grade</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
       <td>Trident</td> 
 
       <td>Internet Explorer 4.0</td> 
 
       <td>Win 95+</td> 
 
       <td>4</td> 
 
       <td>X</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Trident</td> 
 
       <td>Internet Explorer 5.0</td> 
 
       <td>Win 95+</td> 
 
       <td>5</td> 
 
       <td>C</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Trident</td> 
 
       <td>Internet Explorer 5.5</td> 
 
       <td>Win 95+</td> 
 
       <td>5.5</td> 
 
       <td>A</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Trident</td> 
 
       <td>Internet Explorer 6</td> 
 
       <td>Win 98+</td> 
 
       <td>6</td> 
 
       <td>A</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Trident</td> 
 
       <td>Internet Explorer 7</td> 
 
       <td>Win XP SP2+</td> 
 
       <td>7</td> 
 
       <td>A</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Trident</td> 
 
       <td>AOL browser (AOL desktop)</td> 
 
       <td>Win XP</td> 
 
       <td>6</td> 
 
       <td>A</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Gecko</td> 
 
       <td>Firefox 1.0</td> 
 
       <td>Win 98+/OSX.2+</td> 
 
       <td>1.7</td> 
 
       <td>A</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Gecko</td> 
 
       <td>Firefox 1.5</td> 
 
       <td>Win 98+/OSX.2+</td> 
 
       <td>1.8</td> 
 
       <td>A</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Gecko</td> 
 
       <td>Firefox 2.0</td> 
 
       <td>Win 98+/OSX.2+</td> 
 
       <td>1.8</td> 
 
       <td>A</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Gecko</td> 
 
       <td>Firefox 3.0</td> 
 
       <td>Win 2k+/OSX.3+</td> 
 
       <td>1.9</td> 
 
       <td>A</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Gecko</td> 
 
       <td>Camino 1.0</td> 
 
       <td>OSX.2+</td> 
 
       <td>1.8</td> 
 
       <td>A</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Gecko</td> 
 
       <td>Camino 1.5</td> 
 
       <td>OSX.3+</td> 
 
       <td>1.8</td> 
 
       <td>A</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Gecko</td> 
 
       <td>Netscape 7.2</td> 
 
       <td>Win 95+/Mac OS 8.6-9.2</td> 
 
       <td>1.7</td> 
 
       <td>A</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Gecko</td> 
 
       <td>Netscape Browser 8</td> 
 
       <td>Win 98SE+</td> 
 
       <td>1.7</td> 
 
       <td>A</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Gecko</td> 
 
       <td>Netscape Navigator 9</td> 
 
       <td>Win 98+/OSX.2+</td> 
 
       <td>1.8</td> 
 
       <td>A</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Gecko</td> 
 
       <td>Mozilla 1.0</td> 
 
       <td>Win 95+/OSX.1+</td> 
 
       <td>1</td> 
 
       <td>A</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Gecko</td> 
 
       <td>Mozilla 1.1</td> 
 
       <td>Win 95+/OSX.1+</td> 
 
       <td>1.1</td> 
 
       <td>A</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Gecko</td> 
 
       <td>Mozilla 1.2</td> 
 
       <td>Win 95+/OSX.1+</td> 
 
       <td>1.2</td> 
 
       <td>A</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Gecko</td> 
 
       <td>Mozilla 1.3</td> 
 
       <td>Win 95+/OSX.1+</td> 
 
       <td>1.3</td> 
 
       <td>A</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Gecko</td> 
 
       <td>Mozilla 1.4</td> 
 
       <td>Win 95+/OSX.1+</td> 
 
       <td>1.4</td> 
 
       <td>A</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Gecko</td> 
 
       <td>Mozilla 1.5</td> 
 
       <td>Win 95+/OSX.1+</td> 
 
       <td>1.5</td> 
 
       <td>A</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Gecko</td> 
 
       <td>Mozilla 1.6</td> 
 
       <td>Win 95+/OSX.1+</td> 
 
       <td>1.6</td> 
 
       <td>A</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Gecko</td> 
 
       <td>Mozilla 1.7</td> 
 
       <td>Win 98+/OSX.1+</td> 
 
       <td>1.7</td> 
 
       <td>A</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Gecko</td> 
 
       <td>Mozilla 1.8</td> 
 
       <td>Win 98+/OSX.1+</td> 
 
       <td>1.8</td> 
 
       <td>A</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Gecko</td> 
 
       <td>Seamonkey 1.1</td> 
 
       <td>Win 98+/OSX.2+</td> 
 
       <td>1.8</td> 
 
       <td>A</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Gecko</td> 
 
       <td>Epiphany 2.20</td> 
 
       <td>Gnome</td> 
 
       <td>1.8</td> 
 
       <td>A</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Webkit</td> 
 
       <td>Safari 1.2</td> 
 
       <td>OSX.3</td> 
 
       <td>125.5</td> 
 
       <td>A</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Webkit</td> 
 
       <td>Safari 1.3</td> 
 
       <td>OSX.3</td> 
 
       <td>312.8</td> 
 
       <td>A</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Webkit</td> 
 
       <td>Safari 2.0</td> 
 
       <td>OSX.4+</td> 
 
       <td>419.3</td> 
 
       <td>A</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Webkit</td> 
 
       <td>Safari 3.0</td> 
 
       <td>OSX.4+</td> 
 
       <td>522.1</td> 
 
       <td>A</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Webkit</td> 
 
       <td>OmniWeb 5.5</td> 
 
       <td>OSX.4+</td> 
 
       <td>420</td> 
 
       <td>A</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Webkit</td> 
 
       <td>iPod Touch/iPhone</td> 
 
       <td>iPod</td> 
 
       <td>420.1</td> 
 
       <td>A</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Webkit</td> 
 
       <td>S60</td> 
 
       <td>S60</td> 
 
       <td>413</td> 
 
       <td>A</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Presto</td> 
 
       <td>Opera 7.0</td> 
 
       <td>Win 95+/OSX.1+</td> 
 
       <td>-</td> 
 
       <td>A</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Presto</td> 
 
       <td>Opera 7.5</td> 
 
       <td>Win 95+/OSX.2+</td> 
 
       <td>-</td> 
 
       <td>A</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Presto</td> 
 
       <td>Opera 8.0</td> 
 
       <td>Win 95+/OSX.2+</td> 
 
       <td>-</td> 
 
       <td>A</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Presto</td> 
 
       <td>Opera 8.5</td> 
 
       <td>Win 95+/OSX.2+</td> 
 
       <td>-</td> 
 
       <td>A</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Presto</td> 
 
       <td>Opera 9.0</td> 
 
       <td>Win 95+/OSX.3+</td> 
 
       <td>-</td> 
 
       <td>A</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Presto</td> 
 
       <td>Opera 9.2</td> 
 
       <td>Win 88+/OSX.3+</td> 
 
       <td>-</td> 
 
       <td>A</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Presto</td> 
 
       <td>Opera 9.5</td> 
 
       <td>Win 88+/OSX.3+</td> 
 
       <td>-</td> 
 
       <td>A</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Presto</td> 
 
       <td>Opera for Wii</td> 
 
       <td>Wii</td> 
 
       <td>-</td> 
 
       <td>A</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Presto</td> 
 
       <td>Nokia N800</td> 
 
       <td>N800</td> 
 
       <td>-</td> 
 
       <td>A</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Presto</td> 
 
       <td>Nintendo DS browser</td> 
 
       <td>Nintendo DS</td> 
 
       <td>8.5</td> 
 
       <td>C/A<sup>1</sup> 
 

 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td>KHTML</td> 
 
       <td>Konqureror 3.1</td> 
 
       <td>KDE 3.1</td> 
 
       <td>3.1</td> 
 
       <td>C</td> 
 
      </tr> 
 
      <tr> 
 
       <td>KHTML</td> 
 
       <td>Konqureror 3.3</td> 
 
       <td>KDE 3.3</td> 
 
       <td>3.3</td> 
 
       <td>A</td> 
 
      </tr> 
 
      <tr> 
 
       <td>KHTML</td> 
 
       <td>Konqureror 3.5</td> 
 
       <td>KDE 3.5</td> 
 
       <td>3.5</td> 
 
       <td>A</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Tasman</td> 
 
       <td>Internet Explorer 4.5</td> 
 
       <td>Mac OS 8-9</td> 
 
       <td>-</td> 
 
       <td>X</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Tasman</td> 
 
       <td>Internet Explorer 5.1</td> 
 
       <td>Mac OS 7.6-9</td> 
 
       <td>1</td> 
 
       <td>C</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Tasman</td> 
 
       <td>Internet Explorer 5.2</td> 
 
       <td>Mac OS 8-X</td> 
 
       <td>1</td> 
 
       <td>C</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Misc</td> 
 
       <td>NetFront 3.1</td> 
 
       <td>Embedded devices</td> 
 
       <td>-</td> 
 
       <td>C</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Misc</td> 
 
       <td>NetFront 3.4</td> 
 
       <td>Embedded devices</td> 
 
       <td>-</td> 
 
       <td>A</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Misc</td> 
 
       <td>Dillo 0.8</td> 
 
       <td>Embedded devices</td> 
 
       <td>-</td> 
 
       <td>X</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Misc</td> 
 
       <td>Links</td> 
 
       <td>Text only</td> 
 
       <td>-</td> 
 
       <td>X</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Misc</td> 
 
       <td>Lynx</td> 
 
       <td>Text only</td> 
 
       <td>-</td> 
 
       <td>X</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Misc</td> 
 
       <td>IE Mobile</td> 
 
       <td>Windows Mobile 6</td> 
 
       <td>-</td> 
 
       <td>C</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Misc</td> 
 
       <td>PSP browser</td> 
 
       <td>PSP</td> 
 
       <td>-</td> 
 
       <td>C</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Other browsers</td> 
 
       <td>All others</td> 
 
       <td>-</td> 
 
       <td>-</td> 
 
       <td>U</td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 
</div>

DEMO：http://jsfiddle.net/kishoresahas/7j56sbvx