Фильтровать большой список на стороне клиента

Question

Я пытаюсь фильтровать большой список табличных данных с текстовой клавиатурой.

В прошлом я работал с гораздо меньшими списков и используя решение, как в следующем

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

и

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

С этим вы итерацию по списку с содержимым ваш фильтр, и вы переключаете отдельные дисплеи в зависимости от того, следует ли это показывать или нет.

Я пытаюсь достичь этой фильтрации без использования каких-либо дополнительных плагинов (для чего-нибудь, что приходит с JQuery исключением)

Я также пытаюсь держать все фильтрацию на стороне клиента.

Вот моя разметка

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

Я отфильтровывая содержимое данных коды. Также размер моего списка составляет около 2000 пунктов (tr).

ОБНОВЛЕНИЕ: Я получил проголосовать, поэтому позвольте мне уточнить. Я не ищу большого количества кода. Мне просто нужны мысли, если есть лучший способ создать этот фильтр другим способом, чем я это делаю.

Answer 1

поделюсь прозрения я подобрал по пути

1) избегать манипулирования Dóm

Это правило, которое вы будете слышать часто, и это звучит правдоподобно в данном примере, а также. Вы можете избежать манипуляции с dom в небольших экземплярах, но он становится дорогим быстро и даже дороже, если у вас нет хорошо написанного html, так как вам придется анализировать и элементы html, чтобы попытаться найти и управлять точными, - это то, что вы хотите.

2) Если вы решили манипулировать dom, делайте это эффективно.

После использования jquery некоторое время вы поймете, что есть способы работы jquery, которые обкладывают ваши системы.

Вот пример того, что я говорю: http://jsperf.com/jquery-children-vs-findall

Если вы работаете в проблемы со скоростью убедитесь, что вы используете JQuery таким образом, что является столь же эффективным, как это возможно

Решение:

Создайте список с включенным фильтрующим элементом.

Я смог сохранить все на стороне клиента, как я изначально предполагал. Я генерировал динамический html через js, поэтому у меня уже были механизмы для создания моих списков. Мне просто нужно добавить новый метод, который принял в переменной фильтра, и сообщил моему объекту, какие столбцы (ы) я собираюсь отфильтровать.

Вывод:

Я знаю, что я не дать фактический код больше некоторых руководящих принципов и передовой практики рода, и его больше вики затем в QA, но если бы я наткнулся на это может спасти меня часов в моем поиске наилучшего способа фильтрации большого списка на стороне клиента.

Answer 2

Не могли бы вы рассмотреть возможность фильтрации списка с обновлением страницы (на стороне сервера)?

Я думаю, что отображение 2k строк на одной странице не рекомендуется.
На самом деле просто загрузка 2k строк с сервера уже слишком много, я думаю.
Если вам нужно прокрутить страницу, вы можете, например, разбивать страницы на ajax.
Но разбиение на страницы/фильтрация с помощью ajax не так просто, как кажется.