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]