PHP – Infinite Scroll Pagination using JQuery Ajax Example

Infinite Page Scroll Logo

 

How to make a site with infinite page scroll

All credits for the code go to these guys at ItSolutionStuff.com for the code. The code is good, but it has an issue if you scroll too fast with the browser, it gets confused and duplicates lines which makes things pretty messy quickly. I found a fix on Stack Flow which corrects the problem, so I am going to post the new code to use. Most of the code is the same except for the AJAX stuff, there is a bunch of changes we need to make.

 

You can see the scroll in action here CoolHipThings.com

 

Step 1 – Create the Posts table

 

Step 2 – Create the DB Configuration file

db_config.PHP

 

Step 3 – Create index.PHP

index.PHP

 

 

Update to JavaScript in index.PHP

Notice all the loaded = statements. Also the if statement had to be updated. You can read the original StackOverFlow Article here

index.php

 

Step 4 – Create data.PHP

data.PHP

 

Step 5 – Create loadMoreData.PHP

loadMoreData.PHP 

 

 

You may also be interested in the Amazon API Post or the PHP Email Form

 

Please go ahead and leave me a comment…

I would love to hear from you and if I have missed anything, let me know and I will add it.

I would appreciate you linking back to my blog if you found any of these articles useful.
 

About the Author Steven

Steven has a technical background in System Design, Unix Systems and Enterprise Architecture & Design. He also has a background with 15 years of Unix Systems Primarily HP-UX, Linux and AIX Open Systems. He also has a background in programming languages such as C, Perl, PHP, CGI and Web Environments.

follow me on:

Leave a Comment:

4 comments
Stephen says May 27, 2018

I have web app with lots of data i needed like this idea. Thanks a lot you

Reply
Php Expert Programmer says June 1, 2018

Nice tutorial! This is really helpful to used my business site development. It just made my work easier. I absolutely like this tutorial.

Thanks.

Reply
Paritosh Pandey says July 11, 2018

I think infinite scrolling is best for both website owners & visitors because infinite scrolling makes pages more interactive and user-friendly, and the most important thing is the whole page including its static resources are not downloaded frequently. After all, we would not want our visitors to bounce back for just scrolling pages on and on.

Reply
Technology Points says July 25, 2018

Nice Post about Infinite Scroll Pagination using JQuery Ajax with the required Example Code. Thanks for sharing the wonderful Post.

Reply
Add Your Reply