Filtrowanie dużej listy po stronie klienta

Question

Próbuję przefiltrować dużą listę danych tabelarycznych za pomocą klucza tekstowego.

W przeszłości pracowałem z dużo mniejszych list i przy użyciu rozwiązanie jak na poniższym

http://kilianvalkhof.com/2010/javascript/how-to-build-a-fast-simple-list-filter-with-jquery/

i

http://papermashup.com/jquery-list-filtering/

z tymi iterację listy z treścią Twój filtr i przełączasz poszczególne wyświetlacze na podstawie tego, czy ma być pokazywany, czy nie.

staram się osiągnąć ten filtrowanie bez użycia żadnych dodatkowych wtyczek (oprócz wszystkiego, co pochodzi z jQuery)

jestem również stara się utrzymać przez cały filtrowanie po stronie klienta.

Tu jest mój znaczników

<div> 
    <table> 
    <tbody> 
     <tr class="mm-list-control-item" data-code="WHLO-AM"> 
      <td> WHLO-AM </td> 
      <td>Rubber City</td> 
      <td>Classic Hits</td> 
     </tr>   
     <tr class="mm-list-control-item" data-code="WHLO-AM"> 
      <td> WHLO-AM </td> 
      <td>Rubber City</td> 
      <td>Classic Hits</td> 
     </tr> 
     <tr class="mm-list-control-item" data-code="WKDD-FM"> 
      <td> WKDD-FM </td> 
      <td>Rubber City</td> 
      <td>Classic Hits</td> 
     </tr> 
     <tr class="mm-list-control-item" data-code="WNIR-FM"> 
      <td> WNIR-FM </td> 
      <td>Rubber City</td> 
      <td>Classic Hits</td> 
     </tr> 
    <tbody> 
    <table> 
</div> 

ja odsączeniu zawartość danych kodów. Również rozmiar mojej listy to około 2000 pozycji (tr).

AKTUALIZACJA: Otrzymałem głosowanie oddane, więc pozwól mi wyjaśnić. Nie szukam dużych ilości kodu. Potrzebuję tylko trochę przemyśleń, jeśli istnieje lepszy sposób na zbudowanie tego filtru poza tym, jak to robię.

Answer 1

będę dzielić się spostrzeżeniami wybrałem się po drodze

1) DOM uniknąć manipulacji

Jest to reguła będzie słychać często dzwoni i prawdziwe w tym przykładzie, jak również. Możesz uniknąć manipulowania domem w małych instancjach, ale szybko stanie się on kosztowny i nawet droższy, jeśli nie masz dobrze napisanego html, ponieważ będziesz musiał przeanalizować i html elementy, aby spróbować zlokalizować i manipulować dokładnie tym, czego chcesz.

2) Jeśli zdecydujesz się na manipulację domem, rób to wydajnie.

Po użyciu jquery na jakiś czas uświadomisz sobie, że istnieją sposoby, które jquery działa, opodatkowanie w systemie.

Oto przykład tego, co mówię: http://jsperf.com/jquery-children-vs-findall

Jeśli używasz do problemów z prędkością upewnij się, że używasz jQuery w sposób, który jest jak najbardziej skuteczny

Rozwiązanie:

Utwórz listę z włączonym elementem filtru.

Udało mi się zachować wszystko po stronie klienta tak, jak pierwotnie zakładałem. Generowałem dynamiczny html przez js, więc miałem już mechanizmy do budowania moich list. Po prostu muszę dodać nową metodę, która wzięła zmienną filtrującą i powiedziałam mojemu obiektowi, które kolumny mam zamiar odfiltrować.

Wniosek:

wiem nie zrobił dać rzeczywisty kod bardziej pewnych wytycznych i najlepszych praktyk rodzaju, a jego bardziej wiki następnie QA, ale jeśli bym natknąć ten może uratować mnie godzin w moim poszukiwaniu najlepszego sposobu na filtrowanie dużej listy po stronie klienta.

Answer 2

Czy możesz rozważyć filtrowanie listy przy odświeżaniu strony (po stronie serwera)?

Uważam, że nie zaleca się wyświetlania 2k wierszy na jednej stronie.
Właściwie to samo ładowanie 2k linii z serwera to już za dużo.
Jeśli chcesz przewinąć, możesz na przykład dokonać paginacji za pomocą ajax.
Ale paginacja/filtrowanie za pomocą ajaxa nie jest tak proste, jak się wydaje.