It’s easy to group data in SQL statement, but if you have to display it using HTML table, It’s not drag and drop as in reporting environment. One way to group on server side and draw tr td accordingly. But If it is already created with tons of functionality attached, It’s risky to change. Don’t worry, you can do it easily with jQuery.

### HTML:

Let’s take following HTML table as an example:

<table id="myTable" border="1" cellpadding="3" cellspacing="0"> <tr><th>Category</th><th>Product</th><th>Size</th><th>Price</th><th>Shipping</th></tr> <tr><td>Category-1</td><td>Product-1</td><td>Big</td><td>102</td><td>Free</td></tr> <tr><td>Category-1</td><td>Product-1</td><td>Big</td><td>132</td><td>Free</td></tr> <tr><td>Category-1</td><td>Product-2</td><td>Big</td><td>130</td><td>Free</td></tr> <tr><td>Category-1</td><td>Product-2</td><td>Small</td><td>100</td><td>Free</td></tr> <tr><td>Category-2</td><td>Product-3</td><td>Big</td><td>130</td><td>Free</td></tr> <tr><td>Category-2</td><td>Product-3</td><td>Big</td><td>100</td><td>Free</td></tr> <tr><td>Category-2</td><td>Product-3</td><td>Small</td><td>100</td><td>10</td></tr> <tr><td>Category-2</td><td>Product-4</td><td>Big</td><td>150</td><td>10</td></tr> <tr><td>Category-3</td><td>Product-5</td><td>Big</td><td>150</td><td>10</td></tr> <tr><td>Category-3</td><td>Product-5</td><td>Small</td><td>120</td><td>10</td></tr> <tr><td>Category-3</td><td>Product-5</td><td>Big</td><td>120</td><td>Free</td></tr> <tr><td>Category-4</td><td>Product-6</td><td>Big</td><td>120</td><td>10</td></tr> <tr><td>Category-4</td><td>Product-6</td><td>Small</td><td>120</td><td>10</td></tr> </table>

### Script:

Before using the following method, Make sure the data is sorted. The logic is to check row by row if data is same in next row’s td, remove next row’s td and increase rowspan of current row’s td.

$(function() { //Created By: Brij Mohan //Website: https://techbrij.com function groupTable($rows, startIndex, total){ if (total === 0){ return; } var i , currentIndex = startIndex, count=1, lst=[]; var tds = $rows.find('td:eq('+ currentIndex +')'); var ctrl = $(tds[0]); lst.push($rows[0]); for (i=1;i<=tds.length;i++){ if (ctrl.text() == $(tds[i]).text()){ count++; $(tds[i]).addClass('deleted'); lst.push($rows[i]); } else{ if (count>1){ ctrl.attr('rowspan',count); groupTable($(lst),startIndex+1,total-1) } count=1; lst = []; ctrl=$(tds[i]); lst.push($rows[i]); } } } groupTable($('#myTable tr:has(td)'),0,3); $('#myTable .deleted').remove(); });

**groupTable** method has 3 arguments:

** $rows**: jQuery object of table rows to be grouped

** startIndex**: index of first column to be grouped

** total**: total number of columns to be grouped

In above code** startIndex =0** and **total = 3** it means table is grouped by first, second and third column. After grouping, you need to remove deleted class elements like this:

** $(‘#myTable .deleted’).remove();**

you can use code, but need to keep CREDIT COMMENT. The idea came to implement this just one hour ago. So the code can be optimized. Anyway, let me know if you have any issue.

Great function!!! good job

It worked so smoothly !!! Thanks a lot.

Great Coding.

However, I am using datatables.net, and after giving filter, its showing abnormal formatting..

Is there any way to find if we have already implemented Grouping on Table, It its done once, we no need to apply grouping again..

Any Idea?

Br,

Thank you mate, saved a lot of time! :)

Thanks a lot for the snippet, It worked perfect for my requirement :)

You’re great!!!!!!!! THANKS A LOT <3

Code in c# please

In c# code, parameter string of html code?

That’s very GREAT source code. I’ve found an automatic table merge source code like this. Thank you. <3

nice tutorial .

But i want some different like this

http://stackoverflow.com/questions/16764404/calculate-and-set-colspan-value-dynamically

Hi, i have this example http://jsfiddle.net/87PA5/.

I want in each iteration of InfinityScroll on the “Table” it will group again. Any solution?

The correct link is http://jsfiddle.net/87PA5/8/

Hi, The unction is amazing, but I have a question. how I can do if I need rowspan without keep the column before only some column of my grid?

Thank you

Adrian

You can use registerstartupscript/registerclientscript methods to call javascript method after binding the gridview

Hello.. How can the javscript function to group rows be called after data binding the gridview ?

great job. Thanks sir :*

I take it back, I just called it in a loop, much like a moron would do. Well done sir.

This is a great idea. Horribly inefficient, but exactly what I was trying to do. I’m going to try to impliment your logic a few different ways to see if I can make it fast.