Effortlessly Improve User Experience: How to Implement PHP Pagination with Search Functionality Using AJAX
PHP Pagination Code with Search using AJAX
Introduction
Pagination is an important feature for any website that displays a large number of data items on a single page. Pagination enables users to navigate through the data items more easily by dividing them into smaller chunks, which can be displayed on separate pages. In this blog, we will discuss how to implement pagination with search using AJAX in PHP.
AJAX (Asynchronous JavaScript and XML) is a technique used to create dynamic web pages. AJAX enables web pages to retrieve data from a server without reloading the entire page. With AJAX, users can interact with web pages in real-time, without experiencing any lag or delays. AJAX is particularly useful for implementing search functionality, as it allows search results to be displayed on the same page, without requiring a full page reload.
In this blog, we will use PHP, MySQL, jQuery, and AJAX to implement pagination with search functionality.
Step 1: Setting up the Database
The first step in implementing pagination with search is to set up the database. We will create a simple database that contains a single table, which will store the data items that we want to display.
We will create a table called “items” with the following fields:
- id (int, primary key)
- name (varchar)
- description (text)
To create this table, we can use the following SQL query:
Step 2: Creating the Pagination Script
The next step is to create the pagination script. We will use PHP to implement pagination. The pagination script will retrieve a specified number of data items from the database and display them on a single page.
To implement pagination, we will use the LIMIT and OFFSET clauses in SQL. The LIMIT clause specifies the maximum number of records to return, and the OFFSET clause specifies the number of records to skip.
The pagination script will take two parameters: the page number and the number of records per page. We will use these parameters to calculate the OFFSET value.
Here is the PHP code for the pagination script:
The code above first connects to the database using the mysqli() function. It then sets the number of records per page to 5 and retrieves the current page number from the URL using the $_GET superglobal.
The code then calculates the OFFSET value using the current page number and the number of records per page, and uses it in the SQL query to retrieve the records from the database.
The code then displays the records using a while loop, and calculates the total number of pages using a separate SQL query. It then displays the pagination links using a for loop and the previous and next links using if statements.
Step 3: Adding Search Functionality
Now that we have implemented pagination, we can add search functionality to our script. We will use AJAX to implement search functionality, so that search results can be displayed on the same page, without requiring a full page reload.
To add search functionality, we will modify the pagination script to accept a search term from the user. We will then use this search term to filter the records in the SQL query.
Here is the modified PHP code for the pagination script with search functionality:
The code then modifies the pagination links to include the search term in the URL. This is done using the urlencode() function to encode the search term, since it may contain special characters.
Step 4: Implementing the Search Form
Now that we have modified the PHP script to accept a search term, we need to add a search form to our HTML page. We will use AJAX to submit the search form and update the records on the page without requiring a full page reload.
Here is the HTML code for the search form:
The form has an ID of “search-form” and contains a text input field with an ID of “search-term” and a submit button.
We will use jQuery to submit the form via AJAX and update the records on the page.Here is the jQuery code to handle the form submission and update the records:
The code above first waits for the document to be ready using $(document).ready(). It then sets up an event listener for the submit event of the search form using $(‘#search-form’).submit().
When the form is submitted, the code prevents the default form submission using event.preventDefault(). It then gets the search term from the text input field using $(‘#search-term’).val().
The code then makes an AJAX request to the get_records.php script with the search term as a parameter. The type of the AJAX request is set to ‘GET’ since we are sending the search term as a URL parameter.
If the AJAX request is successful, the code updates the records on the page by setting the HTML of the #records element to the response data using $(‘#records’).html(response).
If the AJAX request fails, the code logs the error to the console using console.log().
Step 5: Styling the Pagination and Search Form
Finally, we can style the pagination links and search form to make them look more visually appealing.Here is some sample CSS code to style the pagination links and search form:
The code above first styles the pagination links using the .pagination class. The links are displayed in a row and centered using display: flex; and justify-content: center;. Each link has some padding and margin, a border, border-radius, and a text color. The current page link has a different background color and text color.
The search form is styled using the #search-form ID. The form and its elements are displayed in a row and centered using display: flex; and justify-content: center;. The label has a font-size, font-weight, and margin to position it. The text input has some padding, a border, border-radius, and a width. The submit button has some padding, a border, border-radius, a background-color, and a cursor style.
Step 6: Testing the Pagination and Search
We can now test the pagination and search functionality by visiting the index.php page in a web browser.We should be able to see a list of records with pagination links at the bottom of the page. Clicking on a pagination link should update the records on the page without reloading the entire page.
We can also try searching for a specific record by typing a search term in the search form and clicking the “Search” button. The records on the page should update to show only the records that match the search term.
Conclusion
In this blog post, we learned how to implement pagination and search functionality using PHP, MySQL, and AJAX. We first created a MySQL database and table to store our records. We then wrote PHP code to fetch and display the records on the page with pagination. We added AJAX code to update the records on the page without reloading the entire page when a pagination link is clicked or a search is performed. Finally, we styled the pagination links and search form with CSS to make them look more visually appealing.
By implementing pagination and search functionality, we can make our web applications more user-friendly and improve the user experience. Pagination allows us to split large sets of data into smaller chunks, making it easier to navigate and find specific records. Search allows us to filter the records based on a specific criterion, making it easier to find the exact record we are looking for.
With this knowledge, we can now build more advanced web applications that require pagination and search functionality, such as e-commerce websites, social media platforms, and content management systems.