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);
},