Tengo 3 columnas:
columna1 | Columna2 | Columna3 |
---|---|---|
111111 | 111111 | 1 |
444444 | 444444 | 4 |
333333 | 333333 | 3 |
222222 | 222222 | 2 |
555555 | 555555 | 5 |
666666 | 666666 | 6 |
Si hago click sobre Columna1
, Columna2
o Columna3
la tabla se ordena de menor a mayor:
Columna1 | Columna2 | Columna3 |
---|---|---|
111111 | 111111 | 1 |
222222 | 222222 | 2 |
333333 | 333333 | 3 |
444444 | 444444 | 4 |
555555 | 555555 | 5 |
666666 | 666666 | 6 |
Pero si vuelvo a hacer click no se me ordena de mayor a menor, qué estoy haciendo mal?
$(document).ready(() => {
$('th').each(function (columna) {
$(this).click(function () {
console.log("clickeado columna");
let registros = $('table').find('tbody > tr').get();
registros.sort(function (a, b) {
console.log("sort");
let valor1 = parseInt($(a).children('td').eq(columna).text().toUpperCase(), 16);
let valor2 = parseInt($(b).children('td').eq(columna).text().toUpperCase(), 16);
return valor1 < valor2 ? -1 : valor1 > valor2 ? 1 : 0
});
$.each(registros, function (indice, elemento) {
$('tbody').append(elemento);
});
});
});
});
Utilice dos console.log
para saber si, llegaba a la funcion y si entraba en sort()
.
La primera vez que hago click sobre la columna, aparece:
"clickeado columna"
(672) sort
Y de la segunda vez en adelante:
"clickeado columna"
(121) sort
Actualmente hay 122 registros en la tabla
$(document).ready(() => {
$('th').each(function (columna) {
$(this).click(function () {
let registros = $('table').find('tbody > tr').get();
registros.sort(function (a, b) {
let valor1 = parseInt($(a).children('td').eq(columna).text().toUpperCase(), 16);
let valor2 = parseInt($(b).children('td').eq(columna).text().toUpperCase(), 16);
return valor1 < valor2 ? -1 : valor1 > valor2 ? 1 : 0
});
$.each(registros, function (indice, elemento) {
$('tbody').append(elemento);
});
});
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<table>
<thead>
<tr>
<th>Columna 1</th>
<th>Columna 2</th>
<th>Columna 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>11111</td>
<td>11111</td>
<td>1</td>
</tr>
<tr>
<td>33333</td>
<td>33333</td>
<td>3</td>
</tr>
<tr>
<td>22222</td>
<td>22222</td>
<td>2</td>
</tr>
<tr>
<td>44444</td>
<td>44444</td>
<td>4</td>
</tr>
<tr>
<td>66666</td>
<td>66666</td>
<td>6</td>
</tr>
<tr>
<td>55555</td>
<td>55555</td>
<td>5</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
console.log
del snippet porque no permitia ver con claridad la tabla