Excluir una columna para que no se ordene mediante jQuery tablesorter

Estoy buscando una forma de excluir una sola columna para que no se ordene mediante el complemento tableserge 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.Excluir una columna para que no se ordene mediante jQuery tablesorter

Por ejemplo:

# name 
----------- 
1 papaya 
2 apple 
3 strawberry 
4 banana

Cuando ordenadas en la columna nombre, debería resultar en:

# name 
----------- 
1 apple 
2 banana 
3 papaya 
4 strawberry

Gracias.

Fuente

2009-01-12 Chad Birch

Aquí es un widget que puede utilizar que logre lo que busca:

$(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'] 
    }); 

});

Fuente

2009-01-12 23:12:50

¡Muy bonito! Creo que en el ciclo for debería haber '<=' en lugar de '<'. – Marcin

Cosas grandiosas, una pequeña cosa, sin embargo, no debería comenzar a buclear desde 'var i = 0;' sino 'var i = 1;' de lo contrario obtendrá 0 índice en la parte inferior de la tabla. – Marcin

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?

Fuente

2009-01-12 22:50:05 yaauie

Edición: 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. (. El uso de CSS, en concreto el content property y counter related properties/functions)

<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 CSS2.1, puede utilizar tr: antes en lugar de td: first-child: antes en la muestra 1. (Mozilla only supports this in trunk for now...)

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.

Fuente

2009-01-13 00:18:32 Stobor

Para aquellos que encuentran esta en la búsqueda de una manera de excluir a una columna de ser clasificable (es decir, hacer clic en la cabecera de la columna), el siguiente ejemplo excluye la columna 4 (indexados a cero) de ser ordenados):

$("table").tablesorter({ 
    headers: {4: {sorter: false}} 
});

Fuente

2012-10-16 23:41:33 bcoughlan

Esto saltaría la clasificación para la primera columna y la dejaría 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>

Fuente

2014-03-06 16:14:55 user3389065

La respuesta de Brian Fisher es correcta, pero es demasiado lenta en las 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'] 
    }); 
});

Fuente

2016-10-25 09:48:04 Hubert

$("table").tablesorter({ 
    headers: {4: {sorter: false},8: {sorter: false}} 
});

Fuente

2016-11-15 12:16:56

La respuesta de Stobor es perfecto. El único problema es que debe esperar hasta que la tabla se represente completamente para poner los números.

Algunas observaciones:

que necesita para dar una columna vacía para este método de poner los números.
Si tiene encabezados en la tabla, debe usar las etiquetas THEAD y TBODY para dejar 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 las etiquetas TH en vez de TD para evitar la numeración del pie de página.

Nota: El método mostrado por Abdul sólo restringe al usuario para ordenar por las columnas indicadas, pero su contenido es siempre ordenado con el resto de la fila cuando se selecciona una orden por otra columna sin restricciones.

Fuente

2016-11-17 19:49:26 Jorge

Excluir una columna para que no se ordene mediante jQuery tablesorter

Respuesta

Cuestiones relacionadas