Follow Nirav Raval

Wednesday 24 December 2014

JQury Grouping Table Data



Hello Friends,
Today, lets make some fun with jQuery demo of grouping HTML table data.

Problem:
I have one table with many columns but one column having same data.
And other columns with data related one single column.
For e.g.
List of States. In which list of Cities or Locations.
I need to group all data State wise.

Below is our Table. We need to Group this table data based on State column.




Now, We will use jQuery for group above data based on State Column. And below will be the output.





HTML Table Code before Group:
<body>

<h3>JQury Grouping Table Data</h3>
    <table id="myTable" border="1" cellpadding="3" cellspacing="0">
        <tr>
            <th>Sr No</th>
            <th>State</th>
            <th>Location</th>
            <th>Famous Area</th>           
        </tr>
        <tr>
            <td>1</td>
            <td>Gujarat</td>
            <td>Ahmedabad</td>
            <td>AAA</td>           
        </tr>
        <tr>
            <td>2</td>
            <td>Gujarat</td>
            <td>Baroda</td>
            <td>BBB</td>           
        </tr>
        <tr>
            <td>3</td>
            <td>Gujarat</td>
            <td>Surat</td>
            <td>CCC</td>           
        </tr>
        <tr>
            <td>4</td>
            <td>Gujarat</td>
            <td>Rajkot</td>
            <td>DDD</td>           
        </tr>
        <tr>
            <td>5</td>
            <td>Maharastra</td>
            <td>Mumbai</td>
            <td>EEE</td>           
        </tr>
        <tr>
            <td>6</td>
            <td>Maharastra</td>
            <td>Nagpur</td>
            <td>FFF</td>           
        </tr>
        <tr>
            <td>7</td>
            <td>Maharastra</td>
            <td>Khandala</td>
            <td>GGG</td>           
        </tr>
        <tr>
            <td>8</td>
            <td>Madhya Pradesh</td>
            <td>Bhopal</td>
            <td>HHH</td>           
        </tr>
        <tr>
            <td>9</td>
            <td>Madhya Pradesh</td>
            <td>Rajgarh</td>
            <td>III</td>           
        </tr>
        <tr>
            <td>10</td>
            <td>Madhya Pradesh</td>
            <td>Sehore</td>
            <td>JJJ</td>           
        </tr>
        <tr>
            <td>11</td>
            <td>Madhya Pradesh</td>
            <td>Bhind</td>
            <td>KKK</td>           
        </tr>
        <tr>
            <td>12</td>
            <td>Madhya Pradesh</td>
            <td>Big</td>
            <td>120</td>           
        </tr>
    </table>

Now we will write one jQuery function and apply for above table to group it based on State name.

<script>
    $(document).ready(function() {
        $(function() {
            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)'), 1, 1);
            $('#myTable .deleted').remove();
        });
    });
</script>

Note: I have used below jQuery-2.1.3.min.js file.
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
______________________________________________________________________

Hope you find this helpful....!