Sort only few rows of table - jquery/ javascript

Question

I want to sort only child tr's data and don't want to move parent tr. Only child tr's will move until next parent. I have a table like this :

 <table>
    <tr>
        <th id="column1">Column 1</th>
        <th id="column2">Column 2</th>
        <th>Column 3</th>
    </tr>
    <tr class="parent">
        <td>text</td>
        <td>text</td>
        <td>text</td>
    </tr>
    <tr class="child">
        <td>96</td>
        <td>102</td>
        <td>121</td>
    </tr>
    <tr class="child">
        <td>455</td>
        <td>422</td>
        <td>410</td>
    </tr>
    <tr class="child">
        <td>212</td>
        <td>430</td>
        <td>203</td>
    </tr>
    <tr class="parent">
        <td>text</td>
        <td>text</td>
        <td>text</td>
    </tr>
    <tr class="child">
        <td>363</td>
        <td>581</td>
        <td>231</td>
    </tr>
    <tr class="child">
        <td>632</td>
        <td>115</td>
        <td>212</td>
    </tr>
</table>

Javascript code :

$('#column1, #column2')
    .each(function(){
        var th = $(this),
        thIndex = th.index(),
        inverse = false;

        th.click(function() {
            // sorting classes don't work here b/c this function gets called repeatedly - moved to afterRequest: function

            table.find('tr.parent td').filter(function(){
                return $(this).index() === thIndex;
            }).sortElements(function(a, b){
                return $.text([a]) > $.text([b]) ?
                    inverse ? 1 : -1
                    : inverse ? -1 : 1;

            }, function(){
                // parentNode is the element we want to move
                return this.parentNode;
                //  this.parentNode
            });

            inverse = !inverse;
        });

    });

fiddle : demo

Checkout this jQuery table sorter

Ravi
– Ravi

2013-10-30 05:56:46 +00:00
Commented Oct 30, 2013 at 5:56 — Ravi
– Ravi, Commented Oct 30, 2013 at 5:56
Can you provide a fiddle?

Arjun
– Arjun

2013-10-30 06:00:07 +00:00
Commented Oct 30, 2013 at 6:00 — Arjun
– Arjun, Commented Oct 30, 2013 at 6:00
I cant change the javascript function.

Richa
– Richa

2013-10-30 06:02:05 +00:00
Commented Oct 30, 2013 at 6:02 — Richa
– Richa, Commented Oct 30, 2013 at 6:02
added fiddle for understanding.

Richa
– Richa

2013-10-30 06:47:06 +00:00
Commented Oct 30, 2013 at 6:47 — Richa
– Richa, Commented Oct 30, 2013 at 6:47
Like this ?

Andreas
– Andreas

2013-10-30 07:07:00 +00:00
Commented Oct 30, 2013 at 7:07 — Andreas
– Andreas, Commented Oct 30, 2013 at 7:07

Andreas · Accepted Answer · 2013-10-30 15:58:46Z

1

Wrap each "section" in its own <tbody />

<tbody>
    <tr class="parent"><!-- ... --></tr>
    <tr class="child"><!-- ... --></tr>
    <tr class="child"><!-- ... --></tr>
    <tr class="child"><!-- ... --></tr>
</tbody>
<tbody>
    <tr class="parent"><!-- ... --></tr>
    <tr class="child"><!-- ... --></tr>
    <tr class="child"><!-- ... --></tr>
</tbody>
<!-- ... -->

And do the sorting on each of the <tbody />'s

$("tbody").each(function() {
    $(this).find('tr:not(.parent) td') // ignore the "parent" row
           .filter(function () {
               return $(this).index() === thIndex;
           }).sortElements(function (a, b) {
               return $(a).text() > $(b).text() ? inverse ? -1 : 1 : inverse ? 1 : -1;
           }, function () {
               return this.parentNode;
           });
});

Example

answered Oct 30, 2013 at 15:58

Andreas

21.9k7 gold badges52 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Sort only few rows of table - jquery/ javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related