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.

Also, read:

• DataTable Pagination using PHP & MySQL
• Create Advance Pagination with PHP and MySQL

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 may also like:

• Build Live Chat System with Ajax, PHP & MySQL
• Create Event Calendar with jQuery, PHP and MySQL
• Build Invoice System with PHP & MySQL
• Push Notification System with PHP & MySQL
• Create Bootstrap Cards with PHP and MySQL
• Build Content Management System with PHP & MySQL
• Convert Unix Timestamp To Readable Date Time in PHP
• Ajax Drop Down Selection Data Load with PHP & MySQL
• Inventory Management System with Ajax, PHP & MySQL
• Drag and Drop File Upload using jQuery and PHP
• Load Dynamic Content in Bootstrap Popover with Ajax, PHP & MySQL

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