Ajax pagination with php and mysql

25

Pagination is a part of the parcel in every day development. We always need pagination when viewing tons of data. I received a request from one of my blog readers for providing him the pagination script. So I thought why not share it with all. In this tutorial you will learn how to implement ajax pagination with php and mysql. If you want just a normal pagination i.e. without ajax you can do that too.

View Demo

What is pagination?

Pagination is the technique to divide the content into multiple pages. Suppose you have 500 mails in your inbox, loading all at once is not only time consuming but also a foolish thing as you want to see the latest mail first and that also with a limit like last 10 mails or last 20 mails. This is where pagination comes into play.

Steps to integrate pagination?

There are various method to display pagination. I am going to show the basic one, so after learning this you can then try your hands on some more tricks to display pagination. Follow these steps to create a pagination.

Create a table in your mysql database and insert some dummy rows.

Create a file configure.php that will have basic database connection script.

Create a file getrecords.php that will have server side code, it will be called via ajax from the index page (index.php). Initialize your page number and records limit to show per page.

Calculate the total number of records in the mysql table.

Calculate the last page based on total number of records in table and rows per page.

Calculate the lower limit i.e the starting point of each page based on the current page.

Finally make a database call to fetch table records based on lower limit and page limit.

Displaying pagination links.

Configuring and requesting ajax pagination

Since you are done with the server side code,  all you have to do is make an ajax call. Just send the parameters to the php page via ajax call and display the result.

Create a file index.php. It will be the landing page and the ajax pagination will be called from this page. Only a part of page will be updated. Create a div container with unique id. I have set results as id for displaying records and for displaying a loader image used loader class.

Create a JavaScript function that will request an ajax call to php page. Also send the page number and records limit as the parameter.

On page load call the function displayRecords() to display first set of records . I have set the default value of page number as 1 and records limit as 10.

View Demo
Download

Share.
 

About Author

Entrepreneur & Dreamer

I am a passionate Software Professional, love to learn and share my knowledge with others.

Software is the hardware of my life.

25 Comments

  1. This is very good but what about if it is table records and not pages like you did it if i understand it correctly

  2. Hardik Somaiya on

    Just awesome. This article was a lifesaver. Keep posting such good content 🙂

    Also is there any advance article/code for this thing?

Leave A Reply

CommentLuv badge

Get more stuff like this
in your inbox

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.