In this tutorial we will discuss to create bootstrap table pagination using jquery
Bootstrap Tables are in style HTML tables with class table. The Bootstrap Tables are totally responsive with class .table-responsive and we can use thoroughly all kinds of website applications. Usually we use HTML Tables to demonstration record in grid mode similar rows and columns and fixed Table height to demonstration more rows on table . But add scrolling to Tables is not a very user pleasant remedy, we can generate pagination with Bootstrap Tables to make it more cool.
As we know this tutorial with demo to generate pagination with Bootstrap Tables with jQuery, PHP and MySQL, so the file arrange for this example is given.
- index.php
- pagination.js
- bootstrap-table-pagination.js
Steps1: Create MySQL Database Table
As in this article, we will demonstration data in Bootstrap HTML Table from MySQL database table, so now we will generate MySQL Database table developers using below given 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 add a few data using given 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
Now will include Bootstrap and jQuery library files. Also include Bootstrap Table pagination generate 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: Generate Bootstrap HTML Table using MySQL Data
After that in index.php, we will plan responsive Bootstrap HTML table with dynamic data from MySQL database table developers. We will determine tbody id id=”developers” to generate 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 segment after Bootstrap table to demonstration pagination section.
<div class="col-md-12 text-center">
<ul class="pagination pagination-lg pager" id="developer_page"></ul>
</div>
Steps4: Generate Bootstrap Table Pagination
Now final step in pagination.js, we will call pageMe({}) method with the Bootstrap table, body id to generate pagination with table. We will also use pagination options to limit data on a page and show former and next button.
$(document).ready(function() {
$('#developers').pageMe({
pagerSelector: '#developer_page',
showPrevNext: true,
hidePageNumbers: false,
perPage: 3
});
});
0 Comments