ordenar - tablas con jquery
Excluir una columna de ser ordenada usando jQuery tablesorter (8)
Aquí hay un widget que puedes usar que logrará lo que estás buscando:
$(function() {
// add new widget called indexFirstColumn
$.tablesorter.addWidget({
// give the widget a id
id: "indexFirstColumn",
// format is called when the on init and when a sorting has finished
format: function(table) {
// loop all tr elements and set the value for the first column
for(var i=0; i < table.tBodies[0].rows.length; i++) {
$("tbody tr:eq(" + i + ") td:first",table).html(i+1);
}
}
});
$("table").tablesorter({
widgets: [''zebra'',''indexFirstColumn'']
});
});
Estoy buscando una manera de excluir una sola columna de ser ordenada utilizando el plugin tablesorter de jQuery. Específicamente, tengo una tabla bastante grande y me gustaría mantener fija una columna de "número de fila" para que sea fácil ver en qué posición de la tabla se encuentra una fila en particular, después de ordenarla.
Por ejemplo:
# name
-----------
1 papaya
2 apple
3 strawberry
4 banana
Cuando se ordena en la columna de nombre, debe resultar en:
# name
-----------
1 apple
2 banana
3 papaya
4 strawberry
Gracias.
Hrm. Desde el método de tablesorter para reorganizar la tabla, estoy bastante seguro de que esto no es del todo posible. Tablesorter saca cada palmo del DOM uno por uno y los ordena en función de un campo indexado, reinsertando todo el tr sin cambiar el contenido del tr de ninguna manera. La solución solicitada luego deberá iterar nuevamente a través de la tabla después de cada clasificación y volver a enumerar la primera columna. Tablesorter tiene un método de complemento, que es utilizado por la zebrastripe y otras extensiones. Tal vez esto podría ser utilizado para enganchar los métodos de clasificación?
Editar: He hecho una muestra de esta técnica en http://jsbin.com/igupu4/3 . Haga clic en el encabezado de cualquier columna para ordenar ...
Si bien no tengo una respuesta a su pregunta sobre jquery, esta es una forma alternativa de obtener el comportamiento específico que describió aquí, números de fila fijos después de la clasificación. (Usando CSS, específicamente la propiedad del contenido , y propiedades / funciones relacionadas con el contador ).
<html>
<head>
<title>test</title>
<style type="text/css">
tbody tr
{
counter-increment : rownum ;
}
tbody
{
counter-reset: rownum;
}
table#sample1 td:first-child:before
{
content: counter(rownum) " " ;
}
table#sample2 td.rownums:before
{
content: counter(rownum) ;
}
</style>
<script src="jquery-1.2.6.min.js" ></script>
<script src="jquery.tablesorter.min.js" ></script>
<script>
$(document).ready(function()
{
$("table").tablesorter();
}
);
</script>
</head>
<body>
<table id="sample1">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
</thead>
<tbody>
<tr>
<td>
<p>foo</p>
</td>
<td>
<p>quuz</p>
</td>
</tr>
<tr>
<td>bar</td>
<td>quux</td>
</tr>
<tr>
<td>baz</td>
<td>baz</td>
</tr>
</tbody>
</table>
<table id="sample2">
<thead>
<tr>
<th>Rownums</th>
<th>Col 1</th>
<th>Col 2</th>
<th>More Rownums</th>
</thead>
<tbody>
<tr>
<td class="rownums"></td>
<td>
<p>foo</p>
</td>
<td>
<p>bar</p>
</td>
<td class="rownums"></td>
</tr>
<tr>
<td class="rownums"></td>
<td>quuz</td>
<td>baz</td>
<td class="rownums"></td>
</tr>
<tr>
<td class="rownums"></td>
<td>fred</td>
<td>quux</td>
<td class="rownums"></td>
</tr>
</tbody>
</table>
</body>
</html>
Si su navegador es suficientemente compatible con CSS2.1, puede usar tr: before en lugar de td: first-child: before en la muestra 1. ( Mozilla solo lo admite en trunk por ahora ... )
En la muestra 2, puede ver cómo colocar sus columnas de número de fila en cualquier lugar, no solo en la primera columna.
Para aquellos que encuentran esto mientras buscan una forma de excluir una columna de ser ordenable (es decir, encabezado seleccionable en la columna), el ejemplo siguiente excluye la columna 4 (cero-indexado) de ser ordenada):
$("table").tablesorter({
headers: {4: {sorter: false}}
});
Esto omitirá la clasificación para la primera columna y la permitirá para la segunda. Simplemente configure verdadero / falso para todas las columnas que comiencen con la primera columna como cero.
<script>
$(document).ready(function() {
$("table").tablesorter({
headers: {
0: {sorter: false},
1: {sorter: true},
3: {sorter: false}
}//headers
});
});
</script>
La respuesta de Brian Fisher es correcta, pero es demasiado lenta en tablas grandes (+1600 filas en mi ejemplo). Mejore la forma de iterar a través de cada fila. Todo lo demás es lo mismo.
$(function() {
// add new widget called indexFirstColumn
$.tablesorter.addWidget({
// give the widget a id
id: "indexFirstColumn",
// format is called when the on init and when a sorting has finished
format: function(table) {
// loop all tr elements and set the value for the first column
$(table).find("tr td:first-child").each(function(index){
$(this).text(index+1);
})
}
});
$("table").tablesorter({
widgets: [''zebra'',''indexFirstColumn'']
});
});
$("table").tablesorter({
headers: {4: {sorter: false},8: {sorter: false}}
});
La respuesta de Stobor es perfecta. El único problema es que debe esperar hasta que la tabla se represente completamente para poner los números.
Algunas observaciones:
- Necesitas dar una columna vacía para este método poner los números.
- Si tiene encabezados en la tabla, debe usar las etiquetas THEAD y TBODY para que tablesorter ordene solo los datos en la sección de TBODY.
- Si tiene un pie de página en sus tablas, debe dejarlo fuera de la sección de TBODY para evitar que tablesorter ordene su contenido, también debe usar etiquetas TH en lugar de TD para evitar la numeración del pie de página.
Nota: El método mostrado por Abdul solo restringe al usuario ordenar por las columnas indicadas, pero su contenido siempre se ordena con el resto de la fila cuando se selecciona un pedido por otra columna no restringida.