I'm using Jquery DataTables. 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.
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.
Share Improve this question edited Nov 4, 2015 at 8:55 Kishore Sahasranaman 4,2304 gold badges26 silver badges51 bronze badges asked Nov 4, 2015 at 5:28 JemruJemru 2,11918 gold badges39 silver badges53 bronze badges 05 Answers
Reset to default 7We 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
@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;
}
});
}
}
There is a feature called rowsGroup to the DataTables.
Here is a working example.
Hope that would help the new visitors here.
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);
},
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 ☺