Pagination is an essential feature for displaying large datasets into manageable chunks. When working with web applications, advanced pagination allows users to easily navigate data while maintaining performance and usability. In this comprehensive guide, we’ll learn how to create advanced pagination in PHP and MySQL with Bootstrap styling for modern and responsive designs.
What is Pagination?
Pagination is the process of dividing a dataset into smaller, more manageable sections or “pages”. Instead of loading all the data at once, which can stress the server and slow down page load times, pagination retrieves data in chunks, improving user experience and performance. For example, an e-commerce website displaying products may use pagination to show a specific number of products per page.
Why Use Advanced Pagination?
- Performance Optimization: Large datasets can slow down web applications. Pagination ensures that only a small subset of the data is fetched, reducing server load.
- Improved User Experience: By organizing content into pages, users can more easily navigate through the data without becoming overwhelmed.
- SEO Benefits: Proper pagination improves site structure, allowing search engines to crawl content more effectively.
Step-by-Step Guide to Implement Pagination
- Database Setup
Create a sample database with one table to store data. Below is a sample SQL query to create a table called pagination and populate it with sample data.
Â
CREATE DATABASE pagination_example;
USE pagination_example;
CREATE TABLE pagination (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100) NOT NULL,
gender VARCHAR(10) NOT NULL,
hobies VARCHAR(255) NOT NULL
);
INSERT INTO pagination (name, gender, hobies) VALUES
('John Doe', 'Male', 'Reading, Swimming'),
('Jane Smith', 'Female', 'Dancing, Painting'),
('Alice Johnson', 'Female', 'Running, Traveling'),
('Bob Brown', 'Male', 'Gaming, Cooking'),
('Charlie Adams', 'Male', 'Photography, Hiking');
This table will serve as our sample dataset for pagination.
2. Pagination Logic in PHP
Create a sample database with one table to store data. Below is a sample SQL query to create a table called pagination and populate it with sample data.
The core of pagination involves:
- Calculating the total number of pages.
- Fetching the relevant records for the current page.
Here’s how the logic works:
- Set Records per Page: Define how many records to display on each page.
- Calculate Total Pages: Determine the total number of pages based on the total record count.
- Retrieve Data for the Current Page: Use the
LIMITclause in SQL to fetch only relevant rows for the current page.
Complete Pagination Code
The complete PHP code to implement pagination is given below.
<?php
include_once("./config.php");
$showRecordPerPage = 3;
$currentPage = isset($_GET['page']) ? (int)$_GET['page'] : 1;
$startFrom = ($currentPage * $showRecordPerPage) - $showRecordPerPage;
// Get the total number of records
$sql = "SELECT * FROM pagination";
$result = mysqli_query($conn, $sql);
$row = mysqli_num_rows($result);
$lastPage = ceil($row / $showRecordPerPage);
$firstPage = 1;
$nextPage = $currentPage + 1;
$previousPage = $currentPage - 1;
// Get records for the current page
$sql = "SELECT id, name, gender, hobies FROM pagination LIMIT $startFrom, $showRecordPerPage";
$result = mysqli_query($conn, $sql);
?>
4. Display Data in a Table
Using Bootstrap, you can create a responsive and visually appealing table to display records.
<div class="container"style="margin-top:15%">
<div class="row justify-content-center">
<div class="col-lg-8">
<h2 class="text-center text-white">PHP Pagination</h2>
<table class="table table-bordered" style="width: 100%">
<thead class="table-dark">
<tr>
<th>Id</th>
<th>Name</th>
<th>Gender</th>
<th>Hobies</th>
</tr>
</thead>
<?php while ($row = mysqli_fetch_assoc($result)) { ?>
<tbody style="background-color:white;color: black">
<tr>
<td><?php echo $row['id']; ?></td>
<td><?php echo $row['name']; ?></td>
<td><?php echo $row['gender']; ?></td>
<td><?php echo $row['hobies']; ?></td>
</tr>
</tbody>
<?php } ?>
</table>
</div>
</div>
</div>
5. Add Pagination Links
Pagination links allow users to navigate between pages. Use Bootstrap’s pagination component for styling.
<nav aria-label="Page navigation"style="margin-left: 40%">
<ul class="pagination">
<?php if ($currentPage != $firstPage) { ?>
<li class="page-item">
<a class="page-link" href="?page=<?php echo $firstPage ?>" tabindex="-1" aria-label="First">
<span aria-hidden="true"style="color: black">First</span>
</a>
</li>
<?php } ?>
<?php if ($currentPage >= 2) { ?>
<li class="page-item">
<a class="page-link" href="?page=<?php echo $previousPage ?>"style="color: black">
<?php echo $previousPage ?>
</a>
</li>
<?php } ?>
<li class="page-item active">
<a class="page-link" href="?page=<?php echo $currentPage ?>"style="color: black">
<?php echo $currentPage ?>
</a>
</li>
<?php if ($currentPage != $lastPage) { ?>
<li class="page-item">
<a class="page-link" href="?page=<?php echo $nextPage ?>"style="color: black">
<?php echo $nextPage ?>
</a>
</li>
<li class="page-item">
<a class="page-link" href="?page=<?php echo $lastPage ?>" aria-label="Last">
<span aria-hidden="true"style="color: black">Last</span>
</a>
</li>
<?php }
mysqli_close($conn);
?>
</ul>
</nav>
Key Benefits of Advanced Pagination
- Scalable: Handles datasets of any size efficiently.
- Improves Navigation: Simplifies the user experience by dividing data into smaller parts.
- Responsive Design: With Bootstrap, pagination works seamlessly across all devices.
- SEO Friendly: Structured navigation ensures better indexing by search engines.
Conclusion
Pagination is an important feature for modern web applications dealing with large datasets. By implementing the advanced pagination example described above, you can enhance both user experience and application performance. This PHP and MySQL solution, combined with Bootstrap for styling, provides a scalable and user-friendly approach to effectively managing large amounts of data.
Php Pagination Source Code
Send download link to:
