Pagination in web development remains a relevant element since it enables limiting the number of items that occur at a particular time.
In a case where there are a lot of items and you don’t want to display them all at the same time due to the fact that you want to make the page load faster and also you don’t want to have a bulk file that the user will keep on scrolling.
The benefits of navigations are as follows
- Increases loading speed of the file
- Limits the number of items displayed at a time
- Gives users the option to navigate to other pages easily
- Creates uniformity since the number of items displayed on a page is equal
In a previous article, we discussed how to create pagination using PHP and MySQL whereby we highlighted how you can create pagination by adding the page number at the URL and accessing it using GET
Having researched on SEO (Search Engine Optimization), we noted that adding the page number at the URL of the page tends to create pages with duplicate contents thus it will limit the chances of your page being ranked high by Search Engines, for example, Google and Bing.
For this article, we shall discuss how you can create custom navigation using JQuery and PHP without having to add the page number at the page URL
The result we want to achieve is having custom pagination like the one shown below loading page data using jQuery
To create the custom navigation using JQuery and PHP follow these steps
- Define the number of items you want to display per page, for this case we are using 10 items per page
- Determine the total number of items that are in the database which will help us determine the number of pages that will be defined when we divide with the number of items
<?php
//define number of items per page
$per_page = 10;
//Calculating the number of pages that will be present
$result = mysqli_query($con, "SELECT * FROM your_database_table ORDER BY id DESC");
$count = mysqli_num_rows($result);
//determine the number of pages, ceil() function in PHP is used to round off to the next whole number
$pages = ceil($count/$per_page);
?>
- Define the id where the content will be loaded once it has been fetched using jQuery and PHP
<div id="content"></div>
- Display the navigation pages just below the content div
<div class="blog-pagination" id="pagination">
<ul class="pagination">
<?php
//Pagination Numbers
for($i=1; $i<=$pages; $i++)
{
echo '<li style="cursor:pointer" id="'.$i.'">'.$i.'</li>';
}
?>
</ul>
</div>
- In the footer section, initialize jQuery as below
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
- When the first page is loaded, we manually define the current page as 1 and we use the page number 1 to load the content
<script>
//Default Starting Page Results
$("#pagination li").css({'border' : 'solid #dddddd 1px','padding' : '10px'}).css({'color' : '#0063DC'});
$("#pagination li:first").css({'color' : '#FF0084'}).css({'border' : 'none'});
//load default content
$("#content").load("app/pages-data?page=1&&uid="+ + (new Date()).getTime(),TheLoad());
</script>
The uid in the URL creates a unique value such that the page can always load the current version of the content without cache
- When a pagination number is clicked, we load the content as shown
<script>
//Pagination Click
$("#pagination li").click(function(){
//add css to navigation Styles
$("#pagination li").css({'border' : 'solid #dddddd 1px','padding' : '10px'}).css({'color' : '#0063DC'});
$(this).css({'color' : '#FF0084'}).css({'border' : 'none'});
//collect page number after clicking navigation number
var pageNum = this.id;
//load content in the defined div
$("#content").load("app/pages-data?page=" + pageNum+"&&uid="+ + (new Date()).getTime(),TheLoad());
});
</script>
- Create the PHP file which will process the data as requested by jQuery function
<?php
//database connection
include_once("db_connect.php");
//items per page
$limit = 10;
//get page number
if($_GET) {
$page=$_GET['page'];
}
$start_from = ($page-1)*$limit;
$sql = "SELECT * FROM database_table ORDER BY id DESC LIMIT $start_from, $limit";
$result = mysqli_query($con, $sql);
?>
<?php
while($lp = mysqli_fetch_array($result)){
?>
//content to be displayed here, that is, items per page
<?php } ?>
The full page code will be as shown
<?php
include_once("db_connect.php");
?>
<section>
<div class="container">
<div class="row">
<div class="col-lg-12 entries">
<?php
$per_page = 10;
//Calculating no of pages
$result = mysqli_query($con, "SELECT * FROM database_table ORDER BY id DESC");
$count = mysqli_num_rows($result);
$pages = ceil($count/$per_page)
?>
<div id="content"></div>
<div class="pagination" id="pagination">
<ul class="pagination">
<?php
//Pagination Numbers
for($i=1; $i<=$pages; $i++)
{
echo '<li style="cursor:pointer" id="'.$i.'">'.$i.'</li>';
}
?>
</ul>
</div>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
function TheLoad() {
$("#loading").fadeOut('slow');
};
//Default Starting Page Results
$("#pagination li").css({'border' : 'solid #dddddd 1px','padding' : '10px'}).css({'color' : '#0063DC'});
$("#pagination li:first").css({'color' : '#FF0084'}).css({'border' : 'none'});
//load default content
$("#content").load("app/pages-data?page=1&&uid="+ + (new Date()).getTime(),TheLoad());
//Pagination Click
$("#pagination li").click(function(){
//add css to navigation Styles
$("#pagination li").css({'border' : 'solid #dddddd 1px','padding' : '10px'}).css({'color' : '#0063DC'});
$(this).css({'color' : '#FF0084'}).css({'border' : 'none'});
//collect page number after clicking navigation number
var pageNum = this.id;
//load content in the defined div
$("#content").load("app/pages-data?page=" + pageNum+"&&uid="+ + (new Date()).getTime(),TheLoad());
});
});
</script>
- Run your code and observe the results
Custom pagination will be created which will load page content depending on the page number that is clicked
