How to sort dynamic table data after adding

Question

Hi, I'm trying to sort students after a filter. After filtering the students, I add both the button class class and the text class, as shown in the figure below. My dynamic code will return HTML as follows:

<tbody> <tr> <td><span><img></span><p>Rasmus1 Lerdorf</p><p><b>Hallticket</b> : S28J1</p></td> <td style="line-height:45px">4</td> <td style="line-height:45px">9</td> <td style="line-height:45px">8</td> <td style="line-height:45px">4.5</td> <td><span id="stu28" class="btn btn-danger reject-student selection-class">Not Selected</span></td> <td style="line-height:45px"><input class="overrideStudent" type="text" name="picomment[28]"></td> </tr> <tr> <td><span><img></span><p>Bill Gates</p><p><b>Hallticket</b> : S29J1</p></td> <td style="line-height:45px">9</td> <td style="line-height:45px">10</td> <td style="line-height:45px">8</td> <td style="line-height:45px">6.1</td> <td><span id="stu28" class="btn selection-class btn-success select-student">Selected</span></td> <td style="line-height:45px"><input class="overrideStudent" type="text" name="picomment[29]"></td> </tr> </tbody> 

I want to first show selected students how I can do this.?

This is my javascript code |:

 success: function (response) { $(".selection-class").addClass('btn-danger reject-student'); $(".selection-class").removeClass('btn-success select-student'); $(".selection-class").text('Not Selected'); $.each(response['students'], function(k, student) { $("#stu"+student.student_id).removeClass('btn-danger reject-student'); $("#stu"+student.student_id).addClass('btn-success select-student'); $("#stu"+student.student_id).text('Student Selected'); }); $("#success_message").show(); $("#success_message").html(response['message']); 

Answer 1

I made a button function, but you can change it to your success function

 $('#filter').click(function() { $('tr').hide(); $('table > tbody > tr > td').find('.filterstudent').each(function() { var result1 = $(this).text(); if (result1 == 'Selected') { $(this).closest("tr").show(); } }); var row = $('tr:hidden').show(); row.insertAfter( row.next() ); }); 

https://jsfiddle.net/ppuaLedw/