jquery tablesorter plugin - reter cores alternativas de linhas

Question

Eu levei uma tabela HTML que estou aplicando cores alternativas de linha para, e eu adicionei jquery classificador de mesa sobre ele para que os usuários podem classificar a tabela.

O problema é que as cores alternativos de linha são toda desarrumada agora como (com base na classificação), existem várias linhas com a mesma cor de fundo.

Existe alguma maneira para repor a cor de linha alternativa com o classificador da tabela jQuery?

Answer 1

Já existe um zebra widget padrão, construído para o núcleo, que se aplica a odd aulas e even para linhas alternadas. Ele funciona ou não tiver adicionado class=even/odd para o arquivo html.

É muito fácil de configurar. Eu simplesmente seguiu as instruções na mesa website classificador , e depois modificado a função pronto documento para o seguinte:

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

Eu fiz um exemplo ao responder a pergunta. Você pode ver o resultado em ação , ou veja o exemplo de código .

Answer 2

Com base na resposta de Anthony, mas reformulada como uma one-liner (principalmente):

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

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

chamadas JQuery pode ser "acorrentado" como acima, usando operações como filter() para limitar os elementos selecionados, e .end() para "RESET" para a última seleção. Dito de outra forma, cada .end() "desfaz" o .filter() anterior. O .end() final está parado, já que não há nada para fazer depois disso.

Answer 3

A fim de manter as listras de zebra depois de uma ordenação teve lugar que você precisa para desencadear a zebra Widget novamente.

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

Isso é menos de um truque, como você vai ser reutilizar a lógica da zebra Widget em vez de replicá-lo.

Nota: Este tipo de trabalho-around só é necessária nos casos em que a zebra padrão Widget está falhando. Tenho encontrado na maioria das circunstâncias que este hack não é necessário que o widget está operando corretamente postar tipo.

Answer 4

Como sobre: ??

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);

Oh, e se você quer uma solução muito simples, você poderia prender a respiração para este CSS pseudo-classe para apanhados por todos os principais navegadores:

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

Mas o meu palpite é baseada em como FF e alça empresa CSS para HTML dinâmico, ele iria definir suas listras onload, mas não aplicar o CSS depois de classificar. Mas eu gostaria de saber com certeza.

Answer 5

Revista e solução de trabalho Latest - embutido * Isso também irá permitir a mudança de cor no clique. *

 <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>

Agora tudo deve chutar-se para fora!

Answer 6

Por seu CSS:

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