Complemento jquery tablesorter: conserva 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 de fila alternativos están desordenados ahora ya que (según la clasificación) hay varias filas con el mismo color de fondo.

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

Answer 1

Ya hay un widget predeterminado zebra , integrado en el núcleo, que aplica las clases impar y par 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 en el sitio web del clasificador de tablas , y luego modifiqué la función de documento listo para lo siguiente:

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

Hice un ejemplo mientras respondía la pregunta. Puede ver el resultado en acción , o vea el código de ejemplo .

Answer 2

Basado en la respuesta de Anthony, pero reformulado como una frase (en su mayoría):

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

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

Las llamadas JQuery pueden estar "encadenadas" como arriba, usando operaciones como filter () para limitar los elementos seleccionados, y .end () para " reset " 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 3

Para mantener las rayas de cebra después de que se haya producido una ordenación, debe activar el widget de cebra nuevamente.

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

Esto es menos complicado, ya que reutilizarás la lógica del widget de cebra en lugar de replicarlo.

Nota: este tipo de solución solo se requiere en los casos en que falla el widget de cebra predeterminado. En la mayoría de los casos, descubrí que este truco no es necesario ya que el widget funciona correctamente después de la ordenación.

Answer 4

¿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 realmente simple, puedes contener la respiración para que esta pseudo-clase CSS sea recogida por todos los principales navegadores:

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

Pero mi suposición se basa en cómo FF y la compañía manejan CSS para HTML dinámico, configuraría la carga de sus rayas, pero no aplicaría el CSS después de ordenar. Pero me gustaría saberlo con seguridad.

Answer 5

Solución de trabajo revisada y más reciente: incorporada * 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 debería echarse!

Answer 6

A través de su CSS:

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