cómo tratar con grandes conjuntos de datos con el isótopo jquery

Question

Estoy planeando utilizar el gran plugin de isótopos para mostrar una lista de contactos y luego permitir que se filtren. El problema que tengo es que funciona muy bien para un pequeño conjunto de datos, pero no estoy seguro de la mejor manera de escalarlo para más de 1000 datos.

Hasta el momento, las ideas que tenía eran:

• cargar un subconjunto aleatorio y luego añadir nodos a ella como se hace clic en filtros para rellenar los huecos
• cargar más nodos como un usuario se desplaza
• paginación de los resultados
• no mostrando contactos hasta que se hayan seleccionado suficientes filtros para que los números se encuentren por debajo de un umbral predefinido.

No estoy seguro de si esto funcionará bien y esperaba que otros se hubieran enfrentado a esta situación y pudieran darme algunas ideas.

Answer 1

La situación que describe es bastante común: cómo dar a su usuario acceso a más datos de los que pueden ver en detalle a la vez.

Existen varias formas de responder la pregunta y la respuesta correcta es completamente subjetiva: depende de lo que el usuario intente ver o hacer con los contactos.Antes de que realmente pueda obtener una solución satisfactoria, necesita saber para qué usarán los contactos los usuarios.

sólo una suposición (pero usted sabe mejor que yo!), Yo esperaría que hay dos cosas que están haciendo:

• de búsqueda: En busca de un contacto específico y que ya saben su nombre/encargarse de.
• Explorar: buscando un contacto específico pero no pueden recordar su nombre/identificador. O simplemente están navegando.

Si filtra todas las soluciones, entonces el objetivo de la búsqueda está casi en la bolsa. Explora el objetivo es el que usted quiere diseñar para:

• aleatoria subconjunto: No es una gran manera de navegar, ya que está básicamente dejan con un subconjunto de navegar y entonces debe filtrar de forma explícita a ver nada nuevo. Difícil de filtrar cuando no sabes exactamente lo que estás buscando.
• Desplazamiento infinito: parece una solución popular en estos días. Me resulta engorroso, especialmente si estás 'infinitamente' desplazándote a través de más de 1000 contactos. Probablemente no sea genial para el objetivo Explore.
• Megafonía: también engorrosa, pero quizás si la búsqueda está vinculada a la ordenación alfabética, esto podría funcionar bien.
• Límite de umbral: ¿así que ... simplemente confiando en el filtrado? Esto puede ser malo en algunos casos de esquina en los que el usuario aplica un filtro y no ve nada b/c el umbral aún no se cumple (tal vez hay un lote de personas con el apellido Johnson, que es lo que buscaste). Además, creo que la capacidad de navegar es importante cuando no sabes lo que estás buscando.

---

Creo que si yo estuviera en tu lugar, me gustaría introducir alguna agrupación de los contactos. Dudo que los más de 1000 contactos representen un gran problema de rendimiento (¡en menos hablas de un millón!), Entonces el 10000+ es realmente una restricción del usuario: simplemente no pueden ver 1000 contactos a la vez.

Sugiero introducir algunos clústeres, probablemente por el apellido o apellido y nombre. Luego, presente al usuario una forma de perforar en un clúster pero doblando todos los otros contactos para que no sean visibles inmediatamente. Algo en la resma del accordian/rollodex paradigm. Esto le da a su usuario la ilusión de que están trabajando con 'todos los contactos'. Probablemente introduzca un número mínimo para cada grupo, de modo que si el grupo es lo suficientemente pequeño no se moleste en mostrarlo (es decir, ¿por qué mostrar un clúster para 2 o 3 o 5 contactos? Simplemente muestre los contactos). A medida que se aplican los filtros, los conglomerados se derriten.

Answer 2

Tomando la idea de leer a través de caché, algo así como:

• crear un método que puede cargar un lote de hasta el 100 (o cualquier número configurable) elementos. Sería:
  • búsqueda en la memoria caché (array JS con la clave primaria de la ID del elemento) para los elementos filtrados
  • petición de AJAX los elementos filtrados
  • artículos devueltos por AJAX se agregan a la caché
  • Los artículos devueltos por AJAX también se agregarían en un área de "carga" en la parte inferior del DOM (consulte a continuación), con el ID de los DIV creados la clave principal del elemento
  • el servidor enviaría hasta 100 elementos. Si no hay filtro, enviaría los siguientes elementos que aún no se han enviado. Debería realizar un seguimiento de los elementos cargados. Si el tamaño de los datos almacenados en caché en el lado del servidor (es decir, la sesión) es crítico, puede realizar un seguimiento solo de la ID enviada más alta continua (es decir, si envía identificaciones de primer lote 1, 2, 3, 6, 9 y 10, ID más alta es 3, así que la próxima vez que se enviaría a 4, ..., por lo que mantener en sesión único valor)
• crear un método que puede mover los DIVs en caché a/desde el contenedor de isótopos
• onDomReady carga usando el método de arriba y muestra los primeros 20 elementos por orden natural (en tu caso sería alfabéticamente por nombre). Puede ser 20 elementos o 50 o cualquier ...
• en segundo plano, carga en bucle por AJAX y en el lote de 100 todos los elementos.

Zona de carga podría ser simplemente:

<html> 
    <body> 
    <!-- the page stuff --> 
    <div id="loader" style='display:none'> 
     <!-- all elements are loaded here --> 
     <div class="item">...</div> 
    </div> 
    </body> 
</html> 

esta manera se puede cargar todos los elementos, paso a paso en el DOM, y se puede mostrar sólo lo que se necesita.

Answer 3

Estaba experimentando un rendimiento deficiente al agregar y organizar una gran cantidad de artículos de isótopos y era porque estaba agregando los elementos de forma incremental en lugar de en un lote. Debería ser una opción obvia, pero algo que había pasado por alto.

Asegúrese de utilizar una matriz o una lista de elementos, en lugar de cargar o eliminar de forma individual.

incomingData=['<div>a</div>','<div>b</div>']; 
elements=[]; 

jQuery.each(incomingData,function(ind,val){ 
    var element = jQuery(val).get(0); 
    //$container.isotope('insert', element); //resource heavy 
    elements.push(element); 
}); 

$container.isotope('insert', elements); //less processing