Create Bootstrap Table Pagination with jQuery

Bootstrap Tables are styled HTML tables with class .table. The Bootstrap Tables are fully responsive with class .table-responsive and can be used extensively all kinds of web applications. As we generally use HTML Tables to display data in grid manner like rows and columns and fixed Table height to display more rows on table scroll. But adding scrolling to Tables is not very user friendly solution, we can create pagination with Bootstrap Tables to make it more user friendly. So in this tutorial you will learn how to create pagination with Bootstrap Tables using jQuery. The tutorial explained in easy steps with live demo to display records in Bootstrap tables with PHP and MySQL and then create pagination with jQuery. You can also download source code of live demo.




As we have covered this tutorial with live demo to create pagination with Bootstrap Tables using jQuery, PHP and MySQL, so the file structure for this example is following.

• index.php


• pagination.js


• bootstrap-table-pagination.js

Steps1: Create MySQL Database Table

As in this tutorial, we will display records in Bootstrap HTML Table from MySQL database table, so first we will create MySQL Database table developers using below table create query.

CREATE TABLE `developers` (
`id` int(11) NOT NULL,
`name` varchar(255) NOT NULL,
`address` varchar(255) NOT NULL,
`gender` varchar(255) NOT NULL,
`designation` varchar(255) NOT NULL,
`age` int(11) NOT NULL,
`image` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;


we will also insert few records using below insert query.

INSERT INTO `developers` (`id`, `name`, `address`, `gender`, `designation`, `age`, `image`) VALUES
(1, 'Jhonson', 'Newyork', 'Male', 'Software Engineer', 34, 'image_1.jpg'),
(2, 'Sonya Frost', 'London', 'Female', 'Web Developer', 28, 'image_2.jpg'),
(3, 'Laeeq Khan', 'Delhi, India', 'Male', 'Web Developer', 32, 'image_3.jpg'),
(4, 'Smith', 'London', 'Male', 'Perl Developer', 27, 'image4.jpg'),
(5, 'William', 'Paris', 'Male', 'Java Developer', 28, 'image5.jpg'),
(6, 'Jhon', 'Sydney', 'Male', 'UI Developer', 30, 'image6.jpg'),
(7, 'Steven', 'London', 'Male', 'UI Developer', 34, 'image7.jog'),
(8, 'Rhodes', 'Newyork', 'Male', 'Web Developer', 25, 'image8.jpg');




Steps2: Include Bootstrap and jQuery Files
We will include Bootstrap and jQuery library files. We will also include Bootstrap Table pagination create JavaScript files.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/bootstrap-table-pagination.js"></script>
<script src="js/pagination.js"></script>



Steps3: Create Bootstrap HTML Table with MySQL Data
Now in index.php, we will design responsive Bootstrap HTML table with dynamic records from MySQL database table developers. We will define tbody id id="developers" to create pagination with table body rows.

<div class="table-responsive">
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Address</th>
<th>Designation</th>
</tr>
</thead>
<tbody id="developers">
<?php
$sql_query = "SELECT id, name, gender, address, designation, age FROM developers LIMIT 20";
$resultset = mysqli_query($conn, $sql_query) or die("database error:". mysqli_error($conn));
while( $developer = mysqli_fetch_assoc($resultset) ) {
?>
<tr>
<td><?php echo $developer ['id']; ?></td>
<td><?php echo $developer ['name']; ?></td>
<td><?php echo $developer ['age']; ?></td>
<td><?php echo $developer ['gender']; ?></td>
<td><?php echo $developer ['address']; ?></td>
<td><?php echo $developer ['designation']; ?></td>
</tr
<?php } ?>
</tbody>
</table>
</div>



We will also design pagination section after Bootstrap table to display pagination section.

<div class="col-md-12 text-center">
<ul class="pagination pagination-lg pager" id="developer_page"></ul>
</div>



Steps4: Create Bootstrap Table Pagination
Now finally in pagination.js, we will call pageMe({}) function with Bootstrap table body id to create pagination with table. We will also use pagination options to limit records on a page and show previous and next button.

$(document).ready(function() {
$('#developers').pageMe({
pagerSelector: '#developer_page',
showPrevNext: true,
hidePageNumbers: false,
perPage: 3
});
});


You can view the live demo from the Demo link and can download the script from the Download link below.
Demo [sociallocker]Download[/sociallocker]