ordenar tabla jQuery
Tengo una tabla HTML muy simple con 4 columnas:
Facility Name, Phone #, City, Specialty
Quiero que el usuario pueda ordenar únicamente por nombre de instalación y ciudad .
¿Cómo puedo codificar esto usando jQuery?
Me encontré con esto y pensé en aportar mis 2 centavos. Haga clic en los encabezados de las columnas para ordenar de forma ascendente y nuevamente para ordenar descendente.
- Funciona en Chrome, Firefox, Opera E IE(8)
- Solo usa JQuery
- Realiza clasificación alfabética 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, he proporcionado una solución ES6 Plain Javascript aquí .
Si desea evitar todas las comodidades, le sugiero este sencillo sortElementscomplemento . 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 demostración. (haga clic en los encabezados de las columnas "ciudad" e "instalación" para ordenar)
De lejos, el más fácil que he usado es: http://datatables.net/
Increíblemente simple... solo asegúrese de seguir la ruta de reemplazo de DOM (es decir, crear una tabla y dejar que DataTables la vuelva a formatear), luego asegúrese de formatear su tabla con <thead>y <tbody>/o no funcionará. Ese es el único problema.
También hay soporte para AJAX, etc. Como ocurre con todos los códigos realmente buenos, también es MUY fácil desactivarlo. Sin embargo, te sorprendería lo que podrías usar. Comencé con un DataTable "simple" que solo ordenaba un campo y luego me di cuenta de que algunas de las características eran realmente relevantes para lo que estaba haciendo. A los clientes les ENCANTA las nuevas funciones.
Puntos de bonificación para DataTables por la compatibilidad total con ThemeRoller....
También tuve buena suerte con tablesorter, pero no es tan fácil, no está tan bien documentado y solo tiene buenas características.
