jquery tablesorter plugin - reter cores alternativas de linhas
-
10-07-2019 - |
Pergunta
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?
Solução
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 .
Outras dicas
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.
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.
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.
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!
Por seu CSS:
table.tablesorter tr:nth-child(even) {
background-color: #ECFAFF;
}