In this blog we are going to discuss how to display mysql table data into Jquery Bootgrid Plugin by using php script. Bootgrid is a beautiful grid plugin for displaying database records. Bootgrid grid plugin specially developed for bootstrap. Bootgrid has easy functionality like Lightweight, Cross Browser Support on Internet Explorer, Firefox, Chrome, Safari, Opera and html5 support. In this tutorial we will simply load mysql table records into Jquery Bootgrid. By using this plugin we will get different features like instant table records search, how many entries display on single page, which table column data you want to show or hide, it will make automatic pagination and it also display total number of records in our table. This all features we will be get by using Jquery Bootgrid plugin without writing any line of code.
Source Code
index.php
<?php
$connect = mysqli_connect("localhost", "root", "", "testing");
$query ="SELECT * FROM tbl_student ORDER BY student_id DESC";
$result = mysqli_query($connect, $query);
?>
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | How to load MySql Data in Jquery Bootgrid Plugin using PHP</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.css" />
</head>
<body>
<br /><br />
<div class="container">
<h3 align="center">How to load MySql Data in Jquery Bootgrid Plugin using PHP</h3>
<br />
<div class="table-responsive">
<table id="employee_data" class="table table-striped table-bordered">
<thead>
<tr>
<th data-column-id="id" data-type="numeric">Student ID</th>
<th data-column-id="name">Student Name</th>
<th data-column-id="phone">Student Phone</th>
</tr>
</thead>
<tbody>
<?php
while($row = mysqli_fetch_array($result))
{
echo '
<tr>
<td>'.$row["student_id"].'</td>
<td>'.$row["student_name"].'</td>
<td>'.$row["student_phone"].'</td>
</tr>
';
}
?>
</tbody>
</table>
</div>
</div>
</body>
</html>
<script>
$("#employee_data").bootgrid();
</script>
Another good lesson. Do you provide any training or course in web developing
ReplyDeleteHello. I need to use the jquery-bootgrid but with "side server" using ajax. May you help me please?
ReplyDeletewow! i must confess your tutorials are lovely and helpful...thank you very much.
ReplyDeleteHello,
ReplyDeleteAnyone around to respond.
I need some help regarding the example please.
salman
plz help on how to display images in jquery bootgrid using php ajax. thank u.
ReplyDelete