Infinite Scrolling using JQuery, PHP and MySQLi

infinite_scrolling

Hey Whats’up everyone! Like most of us uses Facebook every day and we all have seen that facebook loads its data in chunks say 15 per page. and every time we hit the bottom it loads more and more data just like pagination but it’s dynamic(without page refresh) so that everything is not loaded up at the first time which increases the chances it of low page speed and more load time, which is annoying for all of us. Right?

So in this tutorial, I am going to show you guys that how can we make that same thing in PHP and MySQLi using JQuery.

Demo Download

So let’s get started.

First, we have to create a database

Infinite_scroll.sql

so as you can see table contain four rows

  • id,
  • title,
  • body(for post body),
  • and URL(for post URL).

And I have inserted dummy data in it. (in my case I have inserted my blog posts with their links).

Now we have to create a DB file to connect with database.

Db.php

It Contains the codes for connecting to the database, we will be including this to all files having SQL queries.

and then we have to create one PHP file for fetching data from database using MySQLi procedural method like i have created here

Get_data.php

so as you can see that we have fetched all the data like body, title and make them Link using ahref tag in HTML. and echo it out.

So now we have to create an index page in which we have to code for JQuery to append all items in the div tag whenever user hit the bottom of the page. In this case I have limits the post to 5 per scroll.

so to detect that if the user has reach the bottom we use this line of code.

and now we just have to append the data of get_data.php file to the div .post using jqyery function.

So in this Chunk of code we are just fetching all the data using AJAX GET request as we have set the limit to 5 and offset to 0

and also we have made the function that whenever userrech the bottom, more data loads up dynamicaly.

So Its like a Dynamic Pagination basically without refreshing the page.

I hope you guys Like the tutorial.

Stay Awesome.

Peace!!!