Question

0

131

Vistas

Cómo realizar la paginación automática cargando nuevas líneas cuando se desplaza hacia abajo

Tengo que mostrar una larga lista de transacciones (al menos más de 1000) por día. Eligiendo el día limito el número de transacciones, también puedo filtrar por estado, pero de todos modos son muchas.

Tengo paginación, pero no me gusta.

Lo que quiero lograr es lo siguiente:

Me gustaría cargar las n transacciones más recientes, donde n podría ser 50.
Las transacciones se muestran en un <div/>
tan pronto como el usuario se desplace hacia abajo y muestre el 80% de las transacciones, me gustaría cargar nuevas transacciones y agregarlas al div
el usuario continúa desplazándose hacia abajo, sin necesidad de cambiar de página. Puede subir y bajar, revisar las primeras transacciones, pero, cuando vuelve a bajar, se cargan nuevas transacciones, si las hay.

Por supuesto, mi base de datos admite consultas con 'SALTAR PRIMERO m LÍMITE n RETORNO contenido'

¿Alguna sugerencia sobre cómo lograr esto lógicamente? Gracias.

about 4 years ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-07-01T03:37:49.676Z

Así es como intentaría lograr esto (en términos muy básicos):

Cargue la lista inicial de transacciones. Podemos promediar la altura de cada transacción para que sea de aproximadamente una línea (digamos aproximadamente 12 px). Almacenamos el número de líneas que se cargó en una variable
Luego agregamos un detector de eventos por la cantidad de desplazamiento que ha realizado el usuario y, dependiendo de eso, agregamos algunas transacciones más. Esto se puede lograr usando algo como esto donde document.documentElement.scrollTop da la cantidad que el usuario se ha desplazado en píxeles

 document.addEventListener("scroll",function(){ console.log("Scrolled By"+document.documentElement.scrollTop)})

Luego, multiplicamos la cantidad de líneas que se cargó y lo multiplicamos por la altura promedio de la transacción y en el detector de eventos anterior y verificamos si la cantidad desplazada es mayor al 80% usando algo como if (0.8*nooftransactions*avgheight < document.documentElement.scrollTop){loadnewlines()
Dentro de la función, primero obtenemos las nuevas transacciones y las colocamos en el documento y luego agregamos el número de las nuevas transacciones a la variable nooftransactions .

0

131

Cómo realizar la paginación automática cargando nuevas líneas cuando se desplaza hacia abajo

1 Respuestas

0

Encuentra empleos remotos

Andres GPT