Ponownie stosuj tabelę po ukryciu wierszy (Twitter Bootstrap)

Question

Używam Bootstrap i paski tabeli, które można filtrować, wybierając niektóre opcje w formularzu. JavaScript interpretuje dane wejściowe formularza i ukrywa wiersze w tabeli, które nie są zgodne z wybranymi kryteriami.

Jednak powoduje to rozbicie pasków tabeli na stole w zależności od tego, które rzędy są ukryte (szare rzędy obok szarych rzędów, białe rzędy obok białych rzędów).

Chciałbym ponownie zastosować paski w zależności od tego, które wiersze są widoczne po przefiltrowaniu wyników. Jak mogę to zrobić?

Użycie .remove() w wierszach tabeli nie jest opcją, ponieważ może być konieczne ponowne wyświetlenie, jeśli kryteria filtru ulegną zmianie i staram się unikać używania AJAX do dynamicznej aktualizacji tabeli na podstawie danych wejściowych filtru (Chciałbym pozostać przy ukrywaniu elementów DOM).

Każda pomoc jest doceniana! Mogę wyjaśnić pytanie w razie potrzeby :)

Answer 1

Tak, jest to zdecydowanie jedna z denerwujących części pasków. Lepsza część męstwo tutaj jest chyba tylko do ponownego zastosowania przeplot z jQuery po każdej aktualizacji:

$("tr:not(.hidden)").each(function (index) { 
    $(this).toggleClass("stripe", !!(index & 1)); 
}); 

Answer 2

odpowiedź Anthony nie działa dla mnie. Po pierwsze, nie ukrywa tabeli Bootstrap klasy table-striped, a po drugie, nie ma (lub przynajmniej nie wydaje się być) wbudowanej klasy stripe dla wierszy tabeli.

Oto moje podejście, w którym odfiltrowałem wiersze w tabeli o identyfikatorze "raportów".

Oto wersja użyć jeśli zdefiniowanie klasy „pasek” na <tr> elementów:

// un-stripe table, since bootstrap striping doesn't work for filtered rows 
$("table#reports").removeClass("table-striped"); 

// now add stripes to alternating rows 
$rows.each(function (index) { 
    // but first remove class that may have been added by previous changes 
    $(this).removeClass("stripe"); 
    if (index % 2 == 0) { 
    $(this).addClass("stripe"); 
    } 
}); 

Jeśli jesteś zbyt leniwy, aby zdefiniować klasę CSS „pas”, a następnie oto szybkie & brudna wersja:

// un-stripe table, since bootstrap striping doesn't work for filtered rows 
$("table#reports").removeClass("table-striped"); 

// now add stripes to alternating rows 
$rows.each(function (index) { 
    // but first remove color that may have been added by previous changes: 
    $(this).css("background-color", "inherit"); 
    if (index % 2 == 0) { 
    $(this).css("background-color", "#f9f9f9"); 
    } 
});