beginner javascript - display limited number of a query & add a loading at the bottom

Question

So basically I have this website that shows what's inside my database via a PHP query.

Thing is, there are about 300+ entries in my database, which means that the displayed page is very, very long.

My question: How can limit the results to, let's say, 25 elements, and load the 25 next when the user has scrolled through the whole page?

I know I can limit the results in my SQL query, but that not what I want. What I want is something like the Facebook Newsfeed: it's initially very small, but the more you scroll, the more data is loaded/showed up. You also don't need to click on any button like "show more", cause Facebook knows when you've hit the bottom of the page.

Didn't find anything searching on google/SO. Maybe I'm just using the wrong keywords, cause I guess it's a fairly common question.

Thanks!

https://github.com/usmanhalalit/strana, see the Infinite Scroll section — niceman, Jun 13 '17 at 22:26
if you want to do it on your own this will help : https://stackoverflow.com/questions/11253316/how-to-paginate-query-results-for-infinite-scroll — niceman, Jun 13 '17 at 22:26

score 0 · Accepted Answer · answered Jun 13 '17 at 22:27

To implement what you are requesting you will need to use JavaScript.

You can either load all entryings and use CSS to hide everything after your first 25, then using JS display them in groups.

Or the way FB and others do it. They use an additional Ajax request to fetch a JSON feed of additional posts and load them into your original page.

beginner javascript - display limited number of a query & add a loading at the bottom

1 Answers1