JQuery DataTables Merge Same Row Data
Asked Answered
C

5

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.

Calamity answered 4/11, 2015 at 5:28 Comment(0)
C
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

Cordeiro answered 4/11, 2015 at 8:18 Comment(3)
Except 1st page doesn't work on other pagination pages.Underskirt
thank you so much, this helps to complete my requirement.Mannino
doesnt work consistently and breaks sorting, but otherwise a nice pluginAlric
L
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;
            }
        });
    }
}
Linnet answered 21/6, 2018 at 12:6 Comment(1)
this is working perfectly as we wanted but can we merge sl no as same for both cellKeithakeithley
D
2

There is a feature called rowsGroup to the DataTables.

Here is a working example.

Hope that would help the new visitors here.

Despair answered 8/1, 2020 at 5:22 Comment(2)
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 :)Alric
Did you Fins Any way to resolve this? @AlricOnia
E
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);
    },
Elsworth answered 29/7, 2021 at 4:52 Comment(0)
D
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 ☺

Dressler answered 30/9, 2021 at 7:22 Comment(1)
How You Resolved "Sorting" Issue Using this i unable to sort it kinda stucking...Onia

© 2022 - 2024 — McMap. All rights reserved.