6

I'm using Jquery DataTables.net. I want to merge duplicate value on data table, example I have:

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

I want them to be like this :

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

How can I do it on DataTables Jquery? Thank you.

0

5 Answers 5

7

We need to handle this in HTML Table .. see the below concept.

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

3
  • 1
    Except 1st page doesn't work on other pagination pages.
    – Phoenix
    May 3, 2017 at 8:41
  • 1
    thank you so much, this helps to complete my requirement. Mar 11, 2021 at 7:33
  • doesnt work consistently and breaks sorting, but otherwise a nice plugin
    – djack109
    Apr 26, 2023 at 21:28
2

@Kishore Sahasranaman answer does not merge all the repeated cell values because they were deleted instead of being hidden. It was skipping last column in for loop condition check.

$(document).ready(function () {
    $('#example').dataTable({
            "scrollX": true,
            "scrollY": "600px",
            "responsive" : false,
            "ordering" : false,
            "paging" : false,
            "searching" : false
    });
    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();
                dimension_td.attr('hidden', true);
                ++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;
            }
        });
    }
}
1
  • this is working perfectly as we wanted but can we merge sl no as same for both cell Dec 15, 2020 at 6:39
2

There is a feature called rowsGroup to the DataTables.

Here is a working example.

Hope that would help the new visitors here.

1
  • Some observations. It breaks my sorting and doesn't work on multiple columns. I won't down vote as it was a good little taster but not quite what I need :)
    – djack109
    Apr 26, 2023 at 21:22
1

Did a tweak on @Kishore S. code, I wanted to be able to group ANY column and on whatever table I wanted, but to do so I needed a hash of the previous column values so that if you ONLY condense column 3, it doesn't "bridge" over a previous column. So:

---------------------------------
Value A    |  Label1     |   1  |
Value A    |  Label2     |   1  |
Value A    |  Label3     |   1  |
Value B    |  Label1     |   1  |
Value B    |  Label2     |   1  |
Value B    |  Label3     |   1  |
---------------------------------

Would become (condesing columns 1 and 3):

---------------------------------
           |  Label1     |      |
Value A    |  Label1     |   1  |
           |  Label1     |      |
           |  Label2     |   1  |
Value B    |  Label3     |   1  |
           |  Label4     |   1  |
---------------------------------

Instead of:

---------------------------------
           |  Label1     |      |
Value A    |  Label1     |      |
           |  Label1     |   1  |
           |  Label2     |      |
Value B    |  Label3     |      |
           |  Label4     |      |
---------------------------------

Anyway, here's the tweaks if anyone needs them: Called with:

MergGridCells('MyTableID',[1,3]);
function MergeGridCells(TableID,rCols) {
  var dimension_cells = new Array();
  var dimension_col = null;
  for(Col in rCols) {
    dimension_col=rCols[Col];
    // first_instance holds the first instance of identical td
    var first_Hash="";
    var first_instance = null;
    var rowspan = 1;
    // iterate through rows
    $("#"+TableID+"> tbody > tr").children("td").attr('hidden', false);
    $("#"+TableID+"> tbody > tr").children("td").attr('rowspan', 1);
    $("#"+TableID).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 + ')');
      var dim_Hash="";
      for(x=1;x<dimension_col;x++){
        dim_Hash+=$(this).find('td:nth-child(' + x + ')').text();
      }
      if (first_instance === null) {
          // must be the first row
          first_instance = dimension_td;
      } else if (dimension_td.text() === first_instance.text() && first_Hash === dim_Hash) {
          // the current td is identical to the previous AND the Hashes are as well
          // remove the current td
          // dimension_td.remove();
          dimension_td.attr('hidden', true);
          ++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;
          first_Hash = dim_Hash;
          rowspan = 1;
      }
    });
  }
}  

UPDATE - So my code worked well, but the jQuery post processing of the dataTable still caused issues when rendering because the rows would become unbalanced as you went through the pages. First page would always be right, the others would fail. To fix this, needed to add in a "reset" to unmerge everything before it was redrawn (see dataTable callback). So example update below makes the dataTable call your Merge function post draw (fixes changing the display length as well):

 "drawCallback": function( settings ) {
        MergeGridCells(TableID,rCols);
    },
1

I think the easiest way to use the default row grouping option for Data tables:

 $('TableID').DataTable({
       responsive: true,
       'rowsGroup': [0] // You can include all the columns you want to include in the merge
});  

Then make sure you include these Javascript files;

<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/ashl1/datatables-rowsgroup/fbd569b8768155c7a9a62568e66a64115887d7d0/dataTables.rowsGroup.js"></script>

It should work like charm ☺

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.