CODEWITHSUNDEEP
javascriptphpjqueryhtmltablesorter
Mr world wide
Mr world wide

Reputation: 4814

How to sort dynamic table data after appending

HI i am trying to sort the students after filter. After filtering the students i am appending and classes class of the button and text as like shown in the below image. enter image description here My dynamic code will return HTML like this:

<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 show the selected students first how can i 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']);

Upvotes: 5

Views: 1511

Answers (1)

Cesar Bielich
Cesar Bielich

Reputation: 4945

I made it a button click 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/

Upvotes: 2

Related Questions