2

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

introducir la descripción de la imagen aquí

$(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>

14
  • y estas seguro que el evento click se esta ejecutando la segunda vuelta; estoy casi seguro que eso es lo que esta fallando...
    – user46896
    Commented el 5 oct. 2022 a las 14:12
  • Si, use un Console.log cada vez que se haga click sobre la columna y aparece el mensaje. Commented el 5 oct. 2022 a las 14:18
  • tambien entra en el metodo sort?
    – user46896
    Commented el 5 oct. 2022 a las 14:21
  • 1
    Saqué los console.log del snippet porque no permitia ver con claridad la tabla Commented el 5 oct. 2022 a las 14:45
  • 1
    Acaba de editarla, en el post original no lo hacía. Si la pregunta la van cambiando a diestra y siniestra los comentarios van quedando desactualizados. Puedes ver el post original y no había conversión alguna @ArcanisGK507 Commented el 5 oct. 2022 a las 14:45

1 respuesta 1

3

Pues el método sort siempre ordena "ascending", si quieres que cambie la dirección de ordenamiento tienes que agregar más código, te dejo un ejemplo de como podrías hacerlo

let sortDirection = 1;

$(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
            });
            
            if (sortDirection === 1) registros.reverse();            
            sortDirection *= -1; // cambia la direccion cada vez que ordenas

            $.each(registros, function (indice, elemento) {
                $('tbody').append(elemento);
            });
        });
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
</body>

1
  • Héroe sin capa :D Mil gracias! Commented el 5 oct. 2022 a las 14:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.