Question

0

129

Views

How to realize automatic pagination loading new lines when you scroll down

I have to display a long list of transactions (at least more than 1000) per day. Choosing the day I limit the number of transactions, I can also filter by status, but they are a lot, anyway.

I have pagination, but I don't like it.

What I want to achieve is the following:

I'd like to load the n most recent transactions, where n could be 50.
The transactions are displayed in a <div/>
as soon the user scroll down and have 80% of the transactions displayed, I'd like to load new transactions, and add them to the div
the user continue to scroll down, without the need to change page. He can go up and down, review the first transactions, but, when he go down again, new transactions are loaded, if any.

Of course, my DB supports a queries with 'SKIP FIRST m LIMIT n RETURN content'

Any suggestion on how to logically accomplish this? Thank you.

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

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

Here's How I Would Try To Accomplish This(In Very Basic Terms):

Load The Initial List Of Transactions. We Can Average The Height Of Each Transaction To be About One Line(Lets Say About 12px). We Store The Number Of Lines Which Was Loaded In A Variable
Then We Add A Event Listener For The Amount Of Scroll The User Has Done And Depending On That We Add A Few More Transactions. This Can Be Achieved Using Something Like This Where document.documentElement.scrollTop gives the amount the user has scrolled in pixels

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

Then We Multiply The Amount Of Lines Which was loaded and multiply it by the Average Transaction height and in the above event listener And Check If The Scrolled Amount Is Greater than 80% of it using something like if (0.8*nooftransactions*avgheight < document.documentElement.scrollTop){loadnewlines()
Inside the function we first get the new transactions and put it into the document and then add the no of the new transactions to the nooftransactions variable.

0

129

How to realize automatic pagination loading new lines when you scroll down

1 answers

0

Find remote jobs

Andres GPT