La ordenación de las filas de la tabla de acuerdo a la tabla encabezado de la columna usando javascript o jquery

Tengo algo como esto

  <table><thead>
  <tr>
     <th>S.L.</th>
     <th>name</th>
  </tr>
 </thead>
<tbody>
  <tr>
     <td>1</td>
     <td>Ronaldo</td>
  </tr>
  <tr>
     <td>2</td>
     <td>Messi</td>
  </tr>
  <tr>
     <td>3</td>
     <td>Ribery</td>
  </tr>
  <tr>
     <td>4</td>
     <td>Bale</td>
  </tr>
</tbody>
 </table>

Lo que quiero es ordenar los <tr> de <tbody> cuando se hace clic th en orden ascendente y descendente alternativamente de acuerdo a la siguiente th clic.

  1. así que si alguien hace clic en el S.L th a continuación, muestra las filas de la tabla en
    descendente y luego ascendente alternativamente en cada clic.
  2. Cuando se hace clic Name th debe mostrar los nombres en orden descendente
    el orden y, a continuación, orden ascendente sin cambio en sus respectivos
    S.L

aquí es el violín

  • Trabajo Violína La pregunta original, aquí.
  • su «Trabajo » Fiddle» no funciona.
  • aquí tienes, mi «Trabajo » Fiddle» ha comenzado a trabajar
  • u puede implementar en jquery usando mi solución coz estoy poco débil en javascript @Bhavik
  • here you go
  • ya lo tengo pero mi curiosidad es cómo la u lo hizo ? canu explicar en una respuesta ? coz i no entiende las funciones u utilizado. @Bhavik
  • Actualizado con algunos comentarios.. jsfiddle.net/a2seK/6
  • pero si no conocemos el segundo parámetro de la función sort_table yo.e el nth child ¿cómo lo hacemos ? @Bhavik
  • Hacer cualquiera de las soluciones de uso memoization, es decir, hacer que la tienda de sus resultados para que puedan ser utilizados de nuevo? Pensando un poco más difícil, esto podría requerir una actualización de la página completa si las filas de la tabla agregar/editar/eliminar. Otra idea es crear la necesaria estructura de datos adicionales(s) y pre-ordenar los datos.

InformationsquelleAutor user3508453 | 2014-06-04

6 Kommentare

  1. 37

    Es posible que desee ver esta página:

    http://blog.niklasottosson.com/?p=1914

    Me imagino que puede ser algo como esto:

    DEMO:http://jsfiddle.net/g9eL6768/2/

    HTML:

     <table id="mytable"><thead>
      <tr>
         <th id="sl">S.L.</th>
         <th id="nm">name</th>
      </tr>
       ....

    JS:

    // sortTable(f,n)
    // f : 1 ascending order, -1 descending order
    // n : n-th child(<td>) of <tr>
    function sortTable(f,n){
        var rows = $('#mytable tbody  tr').get();
    
        rows.sort(function(a, b) {
    
            var A = getVal(a);
            var B = getVal(b);
    
            if(A < B) {
                return -1*f;
            }
            if(A > B) {
                return 1*f;
            }
            return 0;
        });
    
        function getVal(elm){
            var v = $(elm).children('td').eq(n).text().toUpperCase();
            if($.isNumeric(v)){
                v = parseInt(v,10);
            }
            return v;
        }
    
        $.each(rows, function(index, row) {
            $('#mytable').children('tbody').append(row);
        });
    }
    var f_sl = 1; //flag to toggle the sorting order
    var f_nm = 1; //flag to toggle the sorting order
    $("#sl").click(function(){
        f_sl *= -1; //toggle the sorting order
        var n = $(this).prevAll().length;
        sortTable(f_sl,n);
    });
    $("#nm").click(function(){
        f_nm *= -1; //toggle the sorting order
        var n = $(this).prevAll().length;
        sortTable(f_nm,n);
    });

    Espero que esto ayude.

    • ¿por qué tener u utilizado sortTable(variable,0) & sortTable(variable,1)?
    • I anexa explicación de los parámetros de sortTable en mi respuesta anterior. En el sortTable(f,n) , f : 1 orden ascendente, -1 orden descendente , y n : n-ésimo hijo(<td>) de <tr>
    • si nos son desconocidos sobre el enésimo hijo, ¿cómo podemos obtener la n de td ? @naota
    • gracias. Podrías explicar más sobre «desconocido sobre n»? ¿Qué tipo de caso ¿considera usted?
    • considero que la adición de table headers a un número desconocido de tiempo como se ha hecho en google forms entonces yo no sé cómo muchos de los encabezados de tabla de mi usuario crea…..
    • U casi resuelto. Pero si tengo SL en los dígitos de las decenas o miles, o incluso más, causando un problema y error, mientras que pedirlo. Supongamos que s.l están en el rango de 1-1000, a continuación, sería el fin incorrectamente.
    • bueno…+1
    • Lo siento necro esto, pero hay un problema a la hora de ordenar una columna numérica, como se muestra en esta actualizado el violín > jsfiddle.net/a2seK/567 <
    • Gracias por señalarme el problema. He editado mi código de arriba. En el nuevo código, cada valor se comprueba si es Numérico o no.
    • Gracias por la gran solución. Sus obras no sólo en tablas, pero en «tablas hace a través de la vid». +1
    • gran solución ji

  2. 8

    Ofreciendo una ordenación interactiva manejo de múltiples columnas no es nada trivial.

    A menos que usted desea escribir una buena cantidad de código de lógica de control para múltiples fila clics, edición y refrescante contenido de la página, la gestión de los algoritmos de ordenación de tablas grandes… entonces realmente es mejor que la adopción de un plug-in.

    tablesorter, (con actualizaciones de por Mottie) es mi favorito. Es fácil para ponerse en marcha y muy personalizable. Acabo de agregar la clase tablesorter a la tabla que desea ordenar y, a continuación, invocar el tablesorter plugin en un documento en el evento de carga:

    $(function(){
        $("#myTable").tablesorter();
    });

    Usted puede navegar la documentación para aprender acerca de las características avanzadas.

    • Este plugin funciona bien a menos que la tabla ha sido modificada en tiempo de ejecución. No toma en cuenta los cambios realizados en el contenido de la celda. Incluso corriendo .tablesorter() una segunda vez después de la modificación, no para ver los nuevos datos.
    • donde sería que la función() llame a ir? No es obvio.
  3. 8

    uso de Javascript sort() función

    var $tbody = $('table tbody');
    $tbody.find('tr').sort(function(a,b){ 
        var tda = $(a).find('td:eq(1)').text(); //can replace 1 with the column you want to sort on
        var tdb = $(b).find('td:eq(1)').text(); //this will sort on the second column
                //if a < b return 1
        return tda < tdb ? 1 
               //else if a > b return -1
               : tda > tdb ? -1 
               //else they are equal - return 0    
               : 0;           
    }).appendTo($tbody);

    Si quieres ascender, no sólo han de invertir el > y <

    Cambiar la lógica consecuencia para usted.

    El VIOLÍN

    • Este también falla para ordenar numéricamente correctamente > jsfiddle.net/8kp2vjm3/59
    • A hacer es trabajar numéricamente acabo de actualizar el código de tda < tdb a +tda< +tdb y funcionará > Ver actualizado el violín >> jsfiddle.net/vishal_vash/8kp2vjm3/131
    • Me gusta este. Resolver mi problema de cifras decimales. Me hizo ascendente y descendente cambiando el error. gracias SharmaPattar
  4. 0

    JS:

    var TableIDvalue = "myTable";
    var TableLastSortedColumn = -1;
    
    function SortTable() {
      var sortColumn = parseInt(arguments[0]);
      var type = arguments.length > 1 ? arguments[1] : 'T';
      var dateformat = arguments.length > 2 ? arguments[2] : '';
      var table = document.getElementById(TableIDvalue);
      var tbody = table.getElementsByTagName("tbody")[0];
      var rows = tbody.getElementsByTagName("tr");
    
      var arrayOfRows = new Array();
    
      type = type.toUpperCase();
    
      dateformat = dateformat.toLowerCase();
    
      for (var i = 0, len = rows.length; i < len; i++) {
        arrayOfRows[i] = new Object;
        arrayOfRows[i].oldIndex = i;
        var celltext = rows[i].getElementsByTagName("td")[sortColumn].innerHTML.replace(/<[^>]*>/g, "");
        if (type == 'D') {
          arrayOfRows[i].value = GetDateSortingKey(dateformat, celltext);
        } else {
          var re = type == "N" ? /[^\.\-\+\d]/g : /[^a-zA-Z0-9]/g;
          arrayOfRows[i].value = celltext.replace(re, "").substr(0, 25).toLowerCase();
        }
      }
    
      if (sortColumn == TableLastSortedColumn) {
        arrayOfRows.reverse();
      } else {
        TableLastSortedColumn = sortColumn;
        switch (type) {
          case "N":
            arrayOfRows.sort(CompareRowOfNumbers);
            break;
          case "D":
            arrayOfRows.sort(CompareRowOfNumbers);
            break;
          default:
            arrayOfRows.sort(CompareRowOfText);
        }
      }
      var newTableBody = document.createElement("tbody");
    
      for (var i = 0, len = arrayOfRows.length; i < len; i++) {
        newTableBody.appendChild(rows[arrayOfRows[i].oldIndex].cloneNode(true));
      }
      table.replaceChild(newTableBody, tbody);
    }
    
    function CompareRowOfText(a, b) {
      var aval = a.value;
      var bval = b.value;
      return (aval == bval ? 0 : (aval > bval ? 1 : -1));
    }
    
    function deleteRow(i) {
      document.getElementById('myTable').deleteRow(i)
    }

    HTML:

    <table id="myTable" border="1">
      <thead>
        <tr>
          <th>
            <input type="button" onclick="javascript: SortTable(0, 'T');" value="SORT" /></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Shaa</td>
          <td>ABC</td>
          <td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)" /></td>
        </tr>
        <tr>
          <td>cnubha</td>
          <td>XYZ</td>
          <td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)" /></td>
        </tr>
        <tr>
          <td>Fine</td>
          <td>MNO</td>
          <td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)" /></td>
        </tr>
        <tr>
          <td>Amit</td>
          <td>PQR</td>
          <td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)" /></td>
        </tr>
        <tr>
          <td>Sultan</td>
          <td>FGH</td>
          <td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)" /></td>
        </tr>
        <tr>
          <td>Hello</td>
          <td>UST</td>
          <td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)" /></td>
        </tr>
    
      </tbody>
    </table>

  5. -1

    He estado trabajando en una función para trabajar dentro de una biblioteca para un cliente, y se han de tener un montón de problemas para mantener la interfaz de usuario sensible durante la clase (incluso con sólo un par de cientos de resultados).

    La función tiene que recurrir a la tabla completa de cada paginación AJAX, como los nuevos datos pueden requerir la inyección de más arriba. Esto es lo que he tenido hasta el momento:

    • biblioteca jQuery necesario.
    • table es el ID de la tabla se ordenan.
    • La tabla de atributos de sort-attribute, sort-direction y el atributo de columna column son los pre-establecido.

    El uso de algunos de los detalles más arriba, me las arreglé para mejorar el rendimiento un poco.

    function sorttable(table) {
        var context = $('#' + table), tbody = $('#' + table + ' tbody'), sortfield = $(context).data('sort-attribute'), c, dir = $(context).data('sort-direction'), index = $(context).find('thead th[data-column="' + sortfield + '"]').index();
        if (!sortfield) {
            sortfield = $(context).data('id-attribute');
        };
        switch (dir) {
            case "asc":
                tbody.find('tr').sort(function (a, b) {
                    var sortvala = parseFloat($(a).find('td:eq(' + index + ')').text());
                    var sortvalb = parseFloat($(b).find('td:eq(' + index + ')').text());
                    //if a < b return 1
                    return sortvala < sortvalb ? 1
                           //else if a > b return -1
                           : sortvala > sortvalb ? -1
                           //else they are equal - return 0    
                           : 0;
                }).appendTo(tbody);
                break;
            case "desc":
            default:
                tbody.find('tr').sort(function (a, b) {
                    var sortvala = parseFloat($(a).find('td:eq(' + index + ')').text());
                    var sortvalb = parseFloat($(b).find('td:eq(' + index + ')').text());
                    //if a < b return 1
                    return sortvala > sortvalb ? 1
                           //else if a > b return -1
                           : sortvala < sortvalb ? -1
                           //else they are equal - return 0    
                           : 0;
                }).appendTo(tbody);
            break;
      }

    En principio, el código funciona perfectamente, pero es dolorosamente lento… hay alguna forma de mejorar el rendimiento?

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea