tabla - Jquery Ordenar múltiples Tbody
sort table w3schools (1)
Tengo una mesa como esta:
<table>
<thead>
<tr>
<th>Department</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<th>Data</th>
<th>100</th>
</tr>
<tr>
<td>DTP</td>
<td>20</td>
</tr>
<tr>
<td>VTP</td>
<td>30</td>
</tr>
<tr>
<td>RTP</td>
<td>50</td>
</tr>
</tbody>
<tbody>
<tr>
<th>Testing</th>
<th>100</th>
</tr>
<tr>
<td>QTP</td>
<td>20</td>
</tr>
<tr>
<td>ATP</td>
<td>30</td>
</tr>
<tr>
<td>CTP</td>
<td>50</td>
</tr>
</tbody>
</table>
Cuando hago clic en el encabezado del departamento, tr dentro de los datos y las pruebas deben ser ordenadas. Pero los datos y las pruebas TH deben seguir siendo los mismos.
No quiero usar ningún plugin jQuery. Amablemente comparta el código para hacer esta tarea.
Aquí hay una implementación rápida. Esperemos que lo mejore y corresponda a sus necesidades:
var $table = $(''table''),
$th = $table.find(''thead th''),
$tbody = $table.find(''tbody'');
$th.on(''click'', function() {
$th.removeClass();
var index = this.cellIndex,
sortType = $(this).data(''sort''),
sortDir = $(this).data(''dir'') || ''asc'';
$tbody.each(function() {
$(this).find(''tr'').slice(1).sort(function(a, b) {
var aText = $(a).find(''td:eq('' + index + '')'').text(),
bText = $(b).find(''td:eq('' + index + '')'').text();
if (sortDir == ''desc'') {
temp = aText;
aText = bText;
bText = temp;
}
if (sortType == ''string'') {
return aText.localeCompare(bText);
}
else {
return +aText - +bText;
}
})
.appendTo(this);
});
$(this).data(''dir'', sortDir == ''asc'' ? ''desc'' : ''asc'');
$(this).removeClass().addClass(''sort-'' + sortDir);
});