jquery tablesorter plugin - retener colores de fila alternativos

Question

Tomé una tabla html a la que estoy aplicando colores de fila alternativos, y agregué el clasificador de tablas jquery para que los usuarios puedan ordenar la tabla.

El problema es que los colores alternativos de las filas están todos desordenados ya que (según la clasificación) hay varias filas con el mismo color de fondo.

¿Hay alguna forma de restablecer el color alternativo de la fila con el clasificador de tablas jquery?

Answer 1

Ya existe un widget predeterminado zebra, integrado en el núcleo, que aplica las clases odd y even para alternar filas. Funciona independientemente de si ha agregado class=even/odd al archivo html.

Es realmente fácil de configurar. Simplemente seguí las instrucciones de la table sorter website, y luego modificado el documento de la función lista para el siguiente:

<script type="text/javascript"> 
$(document).ready(function() 
    { 
     $("#myTable").tablesorter({ 
    widgets: ['zebra'] 
    }); 
    } 
); 
</script> 

hice un ejemplo al responder a la pregunta. Puede view the result in action, o see the example code.

Answer 2

¿Qué tal:

function fixStripes() { 
    var i = 0; 
    var rowclass; 
    $("table tr").each(function() { 
      $(this).removeClass("odd even"); 
      rowclass = (i%2 == 1) ? "odd" : "even"; 
      $(this).addClass(rowClass); 
     }); 
} 

$("table").bind("sort", fixStripes); 

Ah, y si quieres una solución muy simple, que podría contener la respiración para este CSS pseudo-clase para ser recogido por todos los principales navegadores:

table tr:nth-child(n+1) { 
    color: #ccc; 
} 

Pero mi conjetura se basa en la forma en que FF y la compañía manejan CSS para HTML dinámico, establecería las barras en onload, pero no aplicaría el CSS después de ordenar. Pero me gustaría saberlo con certeza.

Answer 3

Basado en la respuesta de Anthony, pero reformulado como una sola línea (la mayoría):

function fixStripes() { 
    $('table tr').removeClass('odd even') 
     .filter(':even').addClass('even').end() 
     .filter(':odd').addClass('odd'); 
} 

$("table").bind("sort", fixStripes); 

JQuery llamadas puede ser "encadenado", como anteriormente, utilizando operaciones como filter() para limitar los elementos seleccionados, y .end() a "reiniciar" a la última selección. Dicho de otra manera, cada .end() "deshace" el .filter() anterior. El .end() final se deja, ya que no hay nada que hacer después de eso.

Answer 4

Para mantener las rayas de cebra después de que haya tenido lugar una clasificación, debe activar de nuevo el widget de cebra.

$('#myTable') 
.tablesorter({ widgets: ['zebra'] }) 
.bind('sortEnd', function(){ 
    $("#myTable").trigger("applyWidgets"); 
}); 

Esto es menos de un corte, a medida que se vuelve a utilizar la lógica del widget de cebra en lugar de replicarlo.

Nota: Este tipo de solución de problemas solo es necesaria en los casos en que el widget de cebra predeterminado está fallando. En la mayoría de los casos, he encontrado que este truco no es necesario ya que el widget está funcionando correctamente.

Answer 5

Revisada y más reciente solución de trabajo - incorporado * Esto también permitirá el cambio de color al hacer clic. *

<script type="text/javascript"> 
    $(document).ready(function() { 

    $('#tblLookupResult').tablesorter({ widthFixed: true, sortList: [[0, 0], [0, 1], [0, 2]], theme: 'blue', widgets: ['zebra'] }) 
          .tablesorterPager({ container: $("#pager"), size: $(".pagesize option:selected").val() }); 

    $('#tbltable1 tbody tr').live('click', function() {    
        if ($(this).hasClass('even')) { 
         $(this).removeClass('even'); 
         $(this).addClass('ui-selected'); 
        } 

        else if ($(this).hasClass('odd')) { 
         $(this).removeClass('odd'); 
         $(this).addClass('ui-selected'); 
        } 
        else { 
         $(this).removeClass('ui-selected'); 
         $(".tablesorter").trigger("update"); 
         $(".tablesorter").trigger("applyWidgets");       
        } 

     }); 

    }); 
</script> 

Ahora todo debe patear a sí misma!

Answer 6

A través de su css:

table.tablesorter tr:nth-child(even) { 
     background-color: #ECFAFF; 
    }