tabla - jQuery table sort

sort table jquery

Question

Tengo una tabla HTML muy simple con 4 columnas:

Facility Name, Phone #, City, Specialty

Quiero que el usuario pueda ordenar por Nombre de la instalación y solo Ciudad.

¿Cómo puedo codificar esto usando jQuery?

Answer 1

¡Mi voto! jquery.sortElements.js y jquery simple
Muy simple, muy fácil, gracias nandhp ...

            $(''th'').live(''click'', function(){

            var th = $(this), thIndex = th.index(), var table = $(this).parent().parent();

                switch($(this).attr(''inverse'')){
                case ''false'': inverse = true; break;
                case ''true:'': inverse = false; break;
                default: inverse = false; break;
                }
            th.attr(''inverse'',inverse)

            table.find(''td'').filter(function(){
                return $(this).index() === thIndex;
            }).sortElements(function(a, b){
                return $.text([a]) > $.text([b]) ?
                    inverse ? -1 : 1
                    : inverse ? 1 : -1;
            }, function(){
                // parentNode is the element we want to move
                return this.parentNode; 
            });
            inverse = !inverse;     
            });

Dei uma melhorada do código
Un bacalao mejor! Función para todas las tablas en todo el tiempo en todo el tiempo ... ¡Míralo!
DEMO

Answer 2

A la respuesta de James, solo cambiaré la función de clasificación para hacerlo más universal. De esta forma ordenará el texto en orden alfabético y números como números.

if( $.text([a]) == $.text([b]) )
    return 0;
if(isNaN($.text([a])) && isNaN($.text([b]))){
    return $.text([a]) > $.text([b]) ? 
       inverse ? -1 : 1
       : inverse ? 1 : -1;
}
else{
    return parseInt($.text([a])) > parseInt($.text([b])) ? 
      inverse ? -1 : 1
      : inverse ? 1 : -1;
}

Answer 3

Acabamos de empezar a usar esta herramienta hábil: http://tablesorter.com/docs/

Hay un video sobre su uso en: http://www.highoncoding.com/Articles/695_Sorting_GridView_Using_JQuery_TableSorter_Plug_in.aspx

    $(''#tableRoster'').tablesorter({
        headers: {
            0: { sorter: false },
            4: { sorter: false }
        }
    });

Con una mesa simple

<table id="tableRoster">
        <thead> 
                  <tr>
                    <th><input type="checkbox" class="rCheckBox" value="all" id="rAll" ></th>
                    <th>User</th>
                    <th>Verified</th>
                    <th>Recently Accessed</th>
                    <th>&nbsp;</th>
                  </tr>
        </thead>

Answer 4

Aquí hay una tabla que puede ser útil para decidir qué usar: http://blog.sematext.com/2011/09/19/top-javascript-dynamic-table-libraries/

Answer 5

Con mucho, el más fácil que he usado es: http://datatables.net/

Sorprendentemente simple ... solo asegúrate de ir a la ruta de reemplazo DOM (IE, construir una tabla y dejar que DataTables la vuelva a formatear), luego asegúrate de formatear tu tabla con <thead> y <tbody> o no funcionará. Esa es la única gotcha.

También hay soporte para AJAX, etc. Al igual que con todas las piezas de código realmente buenas, también es MUY fácil desactivarlo. Sin embargo, te sorprendería lo que podrías usar. Comencé con una DataTable "vacía" que solo ordenaba un campo y luego me daba cuenta de que algunas de las características eran realmente relevantes para lo que estaba haciendo. Los clientes AMAN las nuevas características.

La bonificación apunta a DataTables para soporte completo de ThemeRoller ....

También he tenido suerte con tablesorter, pero no es tan fácil, no está tan bien documentado, y solo tiene funciones aceptables.

Answer 6

La answer @Nick Grealy es excelente, pero no tiene en cuenta los posibles atributos rowspan de las celdas del encabezado de la tabla (y probablemente las otras respuestas tampoco lo hagan). Aquí hay una mejora de la respuesta de @Nick Grealy que corrige eso. Basado en esta respuesta también (gracias @Andrew Orlov).

También reemplacé la función $.isNumeric por una personalizada (gracias @zad) para que funcione con las versiones anteriores de jQuery.

Para activarlo, agregue class="sortable" a la etiqueta <table> .

$(document).ready(function() {

    $(''table.sortable th'').click(function(){
        var table = $(this).parents(''table'').eq(0);
        var column_index = get_column_index(this);
        var rows = table.find(''tbody tr'').toArray().sort(comparer(column_index));
        this.asc = !this.asc;
        if (!this.asc){rows = rows.reverse()};
        for (var i = 0; i < rows.length; i++){table.append(rows[i])};
    })

});

function comparer(index) {
    return function(a, b) {
        var valA = getCellValue(a, index), valB = getCellValue(b, index);
        return isNumber(valA) && isNumber(valB) ? valA - valB : valA.localeCompare(valB);
    }
}
function getCellValue(row, index){ return $(row).children(''td'').eq(index).html() };

function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

function get_column_index(element) {
    var clickedEl = $(element);
    var myCol = clickedEl.closest("th").index();
    var myRow = clickedEl.closest("tr").index();
    var rowspans = $("th[rowspan]");
    rowspans.each(function () {
        var rs = $(this);
        var rsIndex = rs.closest("tr").index();
        var rsQuantity = parseInt(rs.attr("rowspan"));
        if (myRow > rsIndex && myRow <= rsIndex + rsQuantity - 1) {
            myCol++;
        }
    });
    // alert(''Row: '' + myRow + '', Column: '' + myCol);
    return myCol;
};

Answer 7

Me encanta esta respuesta aceptada, sin embargo, rara vez se obtienen los requisitos para ordenar html y no tener que agregar iconos que indiquen la dirección de clasificación. Tomé el ejemplo de uso de aceptar la respuesta y lo solucioné rápidamente simplemente agregando bootstrap a mi proyecto y agregando el siguiente código:

<div></div>

dentro de cada <th> para que tengas un lugar para establecer el ícono.

setIcon(this, inverse);

del uso de la respuesta aceptada, debajo de la línea:

th.click(function () {

y al agregar el método setIcon:

function setIcon(element, inverse) {

        var iconSpan = $(element).find(''div'');

        if (inverse == false) {
            $(iconSpan).removeClass();
            $(iconSpan).addClass(''icon-white icon-arrow-up'');
        } else {
            $(iconSpan).removeClass();
            $(iconSpan).addClass(''icon-white icon-arrow-down'');
        }
        $(element).siblings().find(''div'').removeClass();
    }

Aquí hay una demo . --Necesitas ejecutar la demostración en Firefox o IE, o desactivar la comprobación de tipo MIME de Chrome para que funcione la demostración. Depende del complemento sortElements, vinculado por la respuesta aceptada, como un recurso externo. ¡Solo un aviso!

Answer 8

Me encontré con esto, y pensé en tirar mis 2 centavos. Haga clic en los encabezados de columna para ordenar ascendente, y nuevamente para ordenar descendente.

• Funciona en Chrome, Firefox, Opera e IE (8)
• Solo usa JQuery
• Hace la clasificación alfa y numérica - ascendente y descendente

$(''th'').click(function(){
    var table = $(this).parents(''table'').eq(0)
    var rows = table.find(''tr:gt(0)'').toArray().sort(comparer($(this).index()))
    this.asc = !this.asc
    if (!this.asc){rows = rows.reverse()}
    for (var i = 0; i < rows.length; i++){table.append(rows[i])}
})
function comparer(index) {
    return function(a, b) {
        var valA = getCellValue(a, index), valB = getCellValue(b, index)
        return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.toString().localeCompare(valB)
    }
}
function getCellValue(row, index){ return $(row).children(''td'').eq(index).text() }

table, th, td {
    border: 1px solid black;
}
th {
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr><th>Country</th><th>Date</th><th>Size</th></tr>
    <tr><td>France</td><td>2001-01-01</td><td>25</td></tr>
    <tr><td><a href=#>spain</a></td><td>2005-05-05</td><td></td></tr>
    <tr><td>Lebanon</td><td>2002-02-02</td><td>-17</td></tr>
    <tr><td>Argentina</td><td>2005-04-04</td><td>100</td></tr>
    <tr><td>USA</td><td></td><td>-6</td></tr>
</table>

** Actualización: 2018

• Para aquellos que estén interesados, les proporcioné una solución ES6 Plain Javascript aquí .

Answer 9

Mi respuesta sería "ten cuidado". Una gran cantidad de complementos de clasificación de tablas jQuery solo clasifican lo que pasa al navegador. En muchos casos, debe tener en cuenta que las tablas son conjuntos dinámicos de datos y que potencialmente podrían contener tropecientos de líneas de datos.

Menciona que solo tiene 4 columnas, pero mucho más importante, no menciona cuántas filas estamos hablando aquí.

Si pasa 5000 líneas al navegador desde la base de datos, sabiendo que la tabla de la base de datos actual contiene 100.000 filas, mi pregunta es: ¿cuál es el objetivo de hacer que la tabla sea ordenable? Para hacer un tipo correcto, debe enviar la consulta nuevamente a la base de datos, y dejar que la base de datos (una herramienta realmente diseñada para ordenar datos) haga la clasificación por usted.

Sin embargo, en respuesta directa a su pregunta, el mejor complemento de clasificación que he encontrado es Ingrid. Hay muchas razones por las que no me gusta este add-on ("campanas y silbatos innecesarios ..." como lo llamas), pero una de sus mejores características en términos de género es que usa ajax y doesn '' Supongamos que ya le ha pasado todos los datos antes de que haga su tipo.

Reconozco que esta respuesta probablemente sea excesiva (y con más de 2 años de retraso) para sus necesidades, pero sí me molesta cuando los desarrolladores en mi campo pasan por alto este punto. Así que espero que alguien más lo descubra.

Me siento mejor ahora.

Answer 10

Puede usar un plugin jQuery ( breedjs ) que proporciona clasificación, filtro y paginación:

HTML:

<table>
  <thead>
    <tr>
      <th sort=''name''>Name</th>
      <th>Phone</th>
      <th sort=''city''>City</th>
      <th>Speciality</th>
    </tr>
  </thead>
  <tbody>
    <tr b-scope="people" b-loop="person in people">
      <td b-sort="name">{{person.name}}</td>
      <td>{{person.phone}}</td>
      <td b-sort="city">{{person.city}}</td>
      <td>{{person.speciality}}</td>
    </tr>
  </tbody>
</table>

JS:

$(function(){
  var data = {
    people: [
      {name: ''c'', phone: 123, city: ''b'', speciality: ''a''},
      {name: ''b'', phone: 345, city: ''a'', speciality: ''c''},
      {name: ''a'', phone: 234, city: ''c'', speciality: ''b''},
    ]
  };
  breed.run({
    scope: ''people'',
    input: data
  });
  $("th[sort]").click(function(){
    breed.sort({
      scope: ''people'',
      selector: $(this).attr(''sort'')
    });
  });
});

Ejemplo de trabajo sobre violín

Answer 11

Si quieres evitar todos los detalles, te sugiero este sencillo complemento sortElements . Uso:

var table = $(''table'');

$(''.sortable th'')
    .wrapInner(''<span title="sort this column"/>'')
    .each(function(){

        var th = $(this),
            thIndex = th.index(),
            inverse = false;

        th.click(function(){

            table.find(''td'').filter(function(){

                return $(this).index() === thIndex;

            }).sortElements(function(a, b){

                if( $.text([a]) == $.text([b]) )
                    return 0;

                return $.text([a]) > $.text([b]) ?
                    inverse ? -1 : 1
                    : inverse ? 1 : -1;

            }, function(){

                // parentNode is the element we want to move
                return this.parentNode; 

            });

            inverse = !inverse;

        });

    });

Y una demo (haga clic en los encabezados de las columnas "ciudad" e "centro" para ordenar)