Simple Pagination with PHP, MySQL and jQuery

Pagination is an important part of any web project where huge numbers of records are listed from the database. In our previous tutorial you have learned how to implement simple pagination with PHP and MySQL, in this tutorial we will show you a simple way to implement pagination with Bootstrap, PHP, MySQL and jQuery. 

Here in this tutorial, I have explained easy steps to implement pagination in bootstrap with demo.

So let’s start the coding,

This is a simple code to generate pagination with the help of Bootstrap. You just need to add the .pagination class to an <ul> element to create pagination with Bootstrap.

MySQL Database Table with Data:
To run this example, you need to create table "employee" using below statement. Insert some data into "employee" table to display employee records. Uses below insert statement to insert data.
--
-- Table structure for table `employee`
--
CREATE TABLE IF NOT EXISTS `employee` (
`id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'primary key',
`employee_name` varchar(255) NOT NULL COMMENT 'employee name',
`employee_salary` double NOT NULL COMMENT 'employee salary',
`employee_age` int(11) NOT NULL COMMENT 'employee age',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 COMMENT='datatable demo table' AUTO_INCREMENT=58 ;
--
-- Dumping data for table `employee`
--
INSERT INTO `employee` (`id`, `employee_name`, `employee_salary`, `employee_age`) VALUES
(1, 'Tiger Nixon', 320800, 61),
(2, 'Garrett Winters', 170750, 63),
(3, 'Ashton Cox', 86000, 66),
(4, 'Cedric Kelly', 433060, 22),
(5, 'Airi Satou', 162700, 33),
(6, 'Brielle Williamson', 372000, 61),
(7, 'Herrod Chandler', 137500, 59),
(8, 'Rhona Davidson', 327900, 55),
(9, 'Colleen Hurst', 205500, 39),
(10, 'Sonya Frost', 103600, 23);


PHP Code: index.php
This is an user interface page for displaying records with pagination. Here added the .pagination class to an <ul> element to create pagination with Bootstrap.
<div class="container">
<?php
$per_page = 10;
//Calculating no of pages
$sql = "SELECT id, employee_name, employee_salary, employee_age FROM employee";
$result = mysqli_query($conn, $sql);
$count = mysqli_num_rows($result);
$pages = ceil($count/$per_page)
?>
<div id="content"></div>
<div id="pagination">
<ul class="pagination">
<?php
//Pagination Numbers
for($i=1; $i<=$pages; $i++)
{
echo '<li id="'.$i.'">'.$i.'</li>';
}
?>
</ul>
</div>
</div>

PHP Code: pagination_data.php
This is a simple PHP script to display data from the employee table. This file called in jQuery file (jquery_pagination.js) to load employee records.

<?php
$per_page = 10;
if($_GET)
{
$page=$_GET['page'];
}
$start = ($page-1)*$per_page;
$sql = "select * from employee order by id limit $start,$per_page";
$result = mysqli_query($conn, $sql);
?>
<table class="table table-bordered">
<?php
while($row = mysqli_fetch_array($result))
{
$id=$row['id'];
$emp_name=$row['employee_name'];
$employee_salary=$row['employee_salary'];
$employee_age=$row['employee_age'];
?>
<tr>
<td><?php echo $id; ?></td>
<td><?php echo $emp_name; ?></td>
<td><?php echo $employee_salary; ?></td>
<td><?php echo $employee_age; ?></td>
</tr>
<?php
}
?>
</table>

JavaScript code: jquery_pagination.js
This is a JavaScript file that works like a data controller to load records from server.

$(document).ready(function() {
//Hide Loading Image
function Hide_Load() {
$("#loading").fadeOut('slow');
};
//Default Starting Page Results
$("#pagination li:first").css({'color' : '#FF0084'}).css({'border' : 'none'});
$("#content").load("pagination_data.php?page=1", Hide_Load());
//Pagination Click
$("#pagination li").click(function(){
//CSS Styles
$("#pagination li").css({'border' : 'solid #dddddd 1px'}).css({'color' : '#0063DC'});
$(this).css({'color' : '#FF0084'}).css({'border' : 'none'});
//Loading Data
var pageNum = this.id;
$("#content").load("pagination_data.php?page=" + pageNum, Hide_Load());
});
});


You can view the live demo from the Demo link and can download the script from the Download link below.

Demo [sociallocker]Download[/sociallocker]