Filtrar lista grande en el lado del cliente

Question

Estoy intentando filtrar una lista grande de datos tabulares con la clave de texto.

En el pasado yo estaba trabajando con listas mucho más pequeñas y el uso de solución como la siguiente

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

y

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

Con estos iterar a través de la lista con el contenido de su filtro, y alterna las pantallas individuales según se muestre o no.

que estoy tratando de lograr este filtrado sin necesidad de utilizar ningún tipo de plugins adicionales (con excepción de todo lo que viene con jQuery)

También estoy tratando de mantener todo el filtrado del lado del cliente.

Aquí es mi marcado

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

estoy de filtrar los contenidos de código de datos. Además, el tamaño de mi lista es de aproximadamente 2.000 ítems (tr).

ACTUALIZACIÓN: recibí un voto negativo, así que déjenme aclarar. No estoy buscando grandes cantidades de código. Solo necesito algunas ideas si hay una mejor manera de diseñar este filtro, aparte de la forma en que lo estoy haciendo.

Answer 1

voy a compartir las ideas que recogí en el camino

1) evitar la manipulación del DOM

Ésta es una regla que se oye a menudo y que suena a verdad en este ejemplo también. Puede escaparse manipulando el dom en pequeñas instancias, pero se vuelve costoso rápidamente y aún más caro si no tiene un html bien escrito ya que tendrá que analizar y encontrar elementos html para tratar de localizar y manipular el exacto que desea.

2) Si decide manipular el dom hacerlo de manera eficiente.

Después de usar jquery por un tiempo, se dará cuenta de que hay formas en que funciona jquery que está afectando su sistema.

Aquí es un ejemplo de lo que estoy diciendo: http://jsperf.com/jquery-children-vs-findall

Si está ejecutando en problemas con la velocidad de asegurarse de que está utilizando jQuery de una manera que sea lo más eficiente posible solución

:

Cree la lista con el elemento de filtro incluido.

Pude mantener todo en el lado del cliente como lo había previsto originalmente. Estaba generando html dinámico a través de js, así que ya tenía los mecanismos para construir mis listas. Solo necesito agregar un nuevo método que incluyera la variable de filtro y le dije a mi objeto qué columna (s) iba a filtrar.

Conclusión:

Sé que yo no doy código real más de unas directrices y mejores prácticas de clase, y es más de un wiki a continuación, un control de calidad, pero si me hubiera encontrado con este que me haya salvado horas en mi búsqueda de la mejor manera de filtrar la lista grande en el lado del cliente.

Answer 2

¿Podría considerar filtrar la lista con una actualización de página (lado del servidor)?

Creo que no se recomienda mostrar 2k líneas en una página.
En realidad, solo cargar 2k líneas del servidor ya es demasiado, creo.
Si necesita desplazarse puede paginar con ajax, por ejemplo.
Pero la paginación/filtrado con ajax no es tan fácil como parece.