XSL - Ordenar al pulsar cabecera de columna

Ordenar al pulsar cabecera de columna

Publicado por Ivan (1 intervención) el 03/02/2006 15:44:00

Hola,
tengo un documento XML ordenado mediante la pantilla XSL que le aplico, visualizando los resultados en una tabla. Mi problema es que las cabeceras de las columnas 'numero correctas' y 'numero incorrectas' deben ordenar los resultados al hacer click sobre ellas.
Como puedo hacerlo?¿
Muchas gracias.

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Ordenar tabla al hacer clic en cabeceras de columnas utilizando JavaScript

Publicado por Alejandro (227 intervenciones) el 05/07/2023 20:14:51

Para ordenar los resultados de una tabla en función de las cabeceras de las columnas "numero correctas" y "numero incorrectas" al hacer clic sobre ellas, puedes utilizar XSLT en combinación con JavaScript. A continuación te mostraré un ejemplo de cómo puedes lograrlo:

1. En tu archivo XSL, agrega los atributos "class" y "onclick" a las cabeceras de las columnas correspondientes. Estos atributos serán utilizados por JavaScript para realizar la ordenación:

<xsl:template match="/">

  <html>

    <head>

      <script>

        function sortTable(column) {

          var table, rows, switching, i, x, y, shouldSwitch;

          table = document.getElementById("myTable");

          switching = true;

          while (switching) {

            switching = false;

            rows = table.getElementsByTagName("tr");

            for (i = 1; i < (rows.length - 1); i++) {

              shouldSwitch = false;

              x = rows[i].getElementsByTagName("td")[column];

              y = rows[i + 1].getElementsByTagName("td")[column];

              if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {

                shouldSwitch = true;

                break;

            if (shouldSwitch) {

              rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);

              switching = true;

      </script>

    </head>

    <body>

      <table id="myTable">

        <thead>

          <tr>

            <th onclick="sortTable(2)">numero correctas</th>

            <th onclick="sortTable(3)">numero incorrectas</th>

          </tr>

        </thead>

        <tbody>

          <!-- Contenido de la tabla generado con XSLT -->

        </tbody>

      </table>

    </body>

  </html>

</xsl:template>

En este ejemplo, se ha agregado el atributo "onclick" a las cabeceras de las columnas "numero correctas" y "numero incorrectas". Al hacer clic en una cabecera, se llama a la función `sortTable(column)` en JavaScript, pasando el número de columna correspondiente como argumento.

2. Luego, en el archivo XML y la hoja de estilo XSL, generas el contenido de la tabla utilizando XSLT, asegurándote de que los valores correspondientes a las columnas "numero correctas" y "numero incorrectas" estén envueltos en elementos `<td>`.

Con esta implementación, al hacer clic en una cabecera de columna, se activará la función `sortTable()` en JavaScript, que realizará la ordenación ascendente de los valores en esa columna.

Recuerda ajustar el código según tu estructura XML y la generación de contenido de la tabla en tu hoja de estilo XSL.

Espero que esta solución te sea útil para ordenar los resultados de tu tabla al hacer clic en las cabeceras de las columnas. ¡Buena suerte!

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar