how to sort a table with child rows based on a column in the parent rows in jQuery

Question

I have a HTML table which includes parents and child rows controlled by data-target. I can collapse and expand my rows.

I want to sort my table based on Total Grand column descending. The sort should be only on parents rows with class .accountLevelLine

My solution is almost working but still some issues. It's sorting the parents rows but the child rows are not aligned together with the parents therefore when expand/collapse the child rows they don't belong to the right parents rows.

Any idea please what am I doing wrong ? I tried multiple solutions on different threads here but the child rows are still causing an issue. Thank you for your support.

Here is my code :

$(document).ready(function() {
// This section for Collapse/Expand feature to hide/unhide child rows
    $('#pool').on('click', 'tbody > tr > .collapsed', function() {
        const collapsed = $(this);
        const accountName = $(this).siblings('.AccountName').text().replace(/[^a-z0-9]/gi, '');
        const trItem = $(this).parents('tr').siblings('.id' + accountName);
        
        trItem.each(function() {
            if($(this).hasClass("hidden")) {
                collapsed.text('▼');
                $(this).removeClass('hidden');
            } else {
                collapsed.text('►');
                $(this).addClass('hidden');
            }
        });
    });
    
// !!!!!!the issue starts here
// This section is for sorting the parents row based on Grand Total column from highest to lowest

 // get rows as array and detach them from the table
var rows = $('#pool tr.accountLevelLine:not(:first)').detach();
// sort the parents rows by number in the td with class "GrandTotal"
rows.sort(function (row1, row2) { 
return parseInt($(row1).find('td.GrandTotal').text()) - parseInt($(row2).find('td.GrandTotal').text());
}); 
// add each row back to the table in the sorted order
rows.each(function () { 
$(this).appendTo('#pool');
});

    
});

    table, th, td {
        border: 1px solid;
    }

    .collapsed {
        cursor: pointer;
    }

    .hidden {
        display:none;
    }






Account Name 0 5 25 50 80 Grand Total    



►
Accountant General


1300000


1300000



OPP-0000733349


1300000


1300000


►
Aena S.m.e. Sa.

6059994



6059994



OPP-0000759948

1009999



1009999



OPP-0000897454

5049995



5049995


►
Adyen N.v.

2575497
20199980


22775477



OPP-0000778343

2575497



2575497



OPP-0000872048


20199980


20199980


►
Allianz Deutschland Ag


4039996
19240481

23280477



OPP-0000764304



19240481

19240481



OPP-0000818151


4039996


4039996


►
Amadeus Data Processing Gmbh

1009999



1009999



OPP-0000839743

1009999



1009999

Lajos Arpad · Accepted Answer

You detach the main rows (except the first) and add them back in the correct order, but you do not detach the inner rows. So, this is what actually happens:

you detach all the main rows, except the first -> your first main row remains, followed by all the inner rows, independently of which collapsable rows they belong to
you sort the rows starting from the second (why don't you include the first?)
you add back the main records in the correct order -> your initial first main row is followed by the inner rows of any main row, then the sorted main rows

This is how your table looks alike after the sort if we don't hide the inner rows:

Fix:

$(document).ready(function() {
// This section for Collapse/Expand feature to hide/unhide child rows
    $('#pool').on('click', 'tbody > tr > .collapsed', function() {
        const collapsed = $(this);
        const accountName = $(this).siblings('.AccountName').text().replace(/[^a-z0-9]/gi, '');
        const trItem = $(this).parents('tr').siblings('.id' + accountName);
        
        trItem.each(function() {
            if($(this).hasClass("hidden")) {
                collapsed.text('▼');
                $(this).removeClass('hidden');
            } else {
                collapsed.text('►');
                $(this).addClass('hidden');
            }
        });
    });
    
// !!!!!!the issue starts here
// This section is for sorting the parents row based on Grand Total column from highest to lowest

 // get rows as array and detach them from the table
var rows = $('#pool tr.accountLevelLine').detach();
let innerRows = $('#pool tr.pool-items').detach();
// sort the parents rows by number in the td with class "GrandTotal"
rows.sort(function (row1, row2) { 
    return parseInt($(row1).find('td.GrandTotal').text()) - parseInt($(row2).find('td.GrandTotal').text());
}); 
// add each row back to the table in the sorted order
rows.each(function () { 
    $(this).appendTo('#pool');
    let that = $(this);
    innerRows.each(function() {
        if ($(this).hasClass(that.find('td:first').data('target').substring(1))) $(this).appendTo('#pool');
    });
});


    
});

table, th, td {
        border: 1px solid;
    }

    .collapsed {
        cursor: pointer;
    }

    .hidden {
        display:none;
    }






Account Name 0 5 25 50 80 Grand Total    



►
Accountant General


1300000


1300000



OPP-0000733349


1300000


1300000


►
Aena S.m.e. Sa.

6059994



6059994



OPP-0000759948

1009999



1009999



OPP-0000897454

5049995



5049995


►
Adyen N.v.

2575497
20199980


22775477



OPP-0000778343

2575497



2575497



OPP-0000872048


20199980


20199980


►
Allianz Deutschland Ag


4039996
19240481

23280477



OPP-0000764304



19240481

19240481



OPP-0000818151


4039996


4039996


►
Amadeus Data Processing Gmbh

1009999



1009999



OPP-0000839743

1009999



1009999

Explanation:

we sort all rows, including the first
we detach the inner rows as well and append them after their parent is appended

how to sort a table with child rows based on a column in the parent rows in jQuery

Answers (1)

Related Questions