追加后如何对动态 table 数据进行排序
How to sort dynamic table data after appending
嗨,我正在尝试对过滤后的学生进行排序。过滤完我要添加的学生和 classes class 按钮和文本后,如下图所示。
我的动态代码将 return HTML 像这样:
<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>
我想先给选中的学生看,我该怎么做..?
这是我的 javascript 代码|:
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']);
我把它设为按钮点击功能,但您可以将其更改为您的成功功能
$('#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() );
});
嗨,我正在尝试对过滤后的学生进行排序。过滤完我要添加的学生和 classes class 按钮和文本后,如下图所示。
<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>
我想先给选中的学生看,我该怎么做..?
这是我的 javascript 代码|:
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']);
我把它设为按钮点击功能,但您可以将其更改为您的成功功能
$('#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() );
});