Efecto de "desplazamiento sin fin" en una tabla HTML

Question

Estoy mostrando una tabla de datos desplazados en una página web. Esta tabla tiene varios miles de filas dinámicas, por lo que se carga desde el servidor (a través de AJAX).

El usuario puede desplazarse hacia arriba y hacia abajo, entonces lo que necesito es detectar cuando el usuario llega al final de la barra de desplazamiento (es decir, la última fila en la parte inferior de la tabla) para solicitar y mostrar más datos.

Puede encontrar este efecto en Google Reader, cuando se desplaza hacia abajo hasta la última publicación en un feed determinado, las solicitudes de Google y muestra las nuevas publicaciones de forma transparente, pero no entiendo cómo lo logran.

Por cierto, en este momento estoy usando un YUI Datatable

Answer 1

Gracias por sus respuestas. Ese es mi código de trabajo final (inspirado en Greg y ajaxian.com), que usa algunas funciones jQuery y funciona con el YUI DataTable.

$(".yui-dt-bd").scroll(load_more); 

function load_more() {    
    if ($(this).scrollend()) { 
     alert("SCROLL END REACHED !"); 
     // TODO load more data 
    } 
} 

$.fn.scrollend = function() { 
    return this[0].scrollHeight - this[0].scrollTop - this.height() <= 0; 
} 

Mi siguiente paso es poner en práctica mi propia YUI Paginator para lograr una completa integración con componentes YUI :)

Answer 2

No estoy familiarizado con el elemento específico que esté utilizando, pero con el fin de implementar este en una ventana de tamaño completo, puede hacer lo siguiente :

$wnd.onscroll = function() { 
    if (($wnd.height - $wnd.scrollTop) < SOME_MARGIN) then doSomething(); 
}; 

Donde scrollTop es esencialmente "cuántos píxeles se han desplazado". Supongo que aplicar esto a la mesa con la que está trabajando hará el trabajo.

Answer 3

Hay una propiedad que noté mientras que la lectura a través de propiedades DOM en Firebug ha pedido hoy scrollY (en Firebug en la pestaña DOM ir a content>scrollY), que parece ser la cantidad de píxeles izquierda para desplazarse en la ventana. Intente ver si esto también se creó para elementos desplazables. Entonces puedes usar la función de Yuval para cargar nuevos datos.

Answer 4

Acabo de buscar en Google y encontré este artículo: Implementing Dynamic Scroll with Ajax, JavaScript, and XML. Parece una explicación completa.

Answer 5

Ick. No es un gran admirador del desplazamiento interminable; rompe algunas de las suposiciones clave que las personas hacen sobre cómo funciona la Web. Prométale que solo lo implementará en las siguientes condiciones:

1) no está sustituyendo una página perfectamente buena que carga todo en una buena mesa larga y permite al usuario usar Ctrl-F para buscar dentro de la página a qué hora llega Fringe

2) no tiene previsto insertar un anuncio en la parte inferior de cada fragmento de datos desplazados.

3) está proporcionando una alternativa de trabajo (hey, hay una buena mesa larga otra vez) para personas ciegas y personas que navegan por la Web con JavaScript deshabilitado.

Answer 6

Si está utilizando el YUI, tiene un tableScrollEvent que se dispara cuando se desplaza la tabla. Aúne esto con la función generateRequest de dataTable y podría implementar un desplazamiento infinito mirando el tableScrollEvent y comenzando una solicitud cuando se acerque al final de su conjunto de datos.

El YUI doc de no tienen un ejemplo específico para este caso, pero es suficiente para demostrar que how to handle the data devuelto por GenerateRequest

Answer 7

Puede ver su funcionamiento here YUI solamente. En contraste con una de las soluciones sugeridas anteriormente, la barra de desplazamiento se mueve continuamente, la posición y el tamaño reflejan el tamaño real y la posición del área visible, no carga el siguiente lote cuando la barra de desplazamiento toca fondo. La barra de desplazamiento llega a la parte inferior solo cuando el último de los registros completos se encuentra en la parte inferior del área de visualización. Por supuesto, esto solo funciona si sabes cuántos registros hay.