Ajax Paging script using PHP MySQL
Ajax based solutions are popular as it is not required to reload the page. Here is the code to learn Ajax by applying to our paging script. Read this if you are new to Ajax. You can also read our basic paging script.
We are using our student table which have 35 records. Number of records per page is fixed at 10 so we will have Forward and Backward movement buttons to navigate to previous and next page of records. Each page will display 10 records and last page will show balance five records.
We have used button style property to mange the display. Once we are in last page or record display then we will not display the Forward navigational button. Same way Previous button can be hidden while displaying the fist set of 10 records.
Installation1.Open config.php file and enter your database login details
2.Open mysql-dump.txt file and use the sql to create your student table
3.Keep the json2.js file ( after downloading )
How Paging script worksHere main difference is collecting the records from backend script without reloading the page. To receive the data and to post data we need to use Ajax. Let us start with how to post data to backend script.
Two parameters are posted to backed script. One is direction ( forward or backward ) and other one is value of end record. The value of end record is 10 for the first page ( if we are displaying 10 records per page ) or the value of end record is 20 if we are in second page.
Taking these two values we prepare the query string and post the data to our backend script php_paging-ajaxck.php using GET method of form posting.
This is our backend script which receives information from our demo page and process to get the required number of pages from student table. It receives two parameters. One is direction ( which button is pressed by user ) and other is value of end record.
Before using end of record value we will sanitize the data to prevent any injection attack.
We will set 10 records per page here but you can change to any value you want.
For paging we will find out total number of records present in our table matching to our requirement.
We can set number of records to be displayed in a page.
Now based on direction button pressed we will set the value of start record. We will be using limit query to get a set of records from the table so start record is required for the query we will use to get the set of records from student table.
Setting the $end to yesFor example if we are in fourth page of student table ( total number of records in table is 35 ) then our end record number will be 40 so we should not show the Next button to users. As long as our end record value is less than total number of records, we should show the forward button. For this we will set the $end variable to yes.
Similarly to manage the backward button we should check that $endrecord is more than value set for $limit.
With this we will return data to front end page by using Json.
Receiving the dataWe will first get the Json data in our home page.
Here myObject is an array with records and data. We know that it has one more array inside named data. We will loop through this array to display the records.
Now let us store the value of endrecord which is required for further posting back to backend script.
We have two navigational buttons, Previous button and next button to move to previous and next set of records. At first page we need to hide Previous button and in last page we need to hide Next button. We will manage the display of buttons by using its style property.
This article is written by plus2net.com team.
| ▼ Click for more tutorial on Ajax & PHP