Hello friends in this post we are going to learn how to use Datatables jQuery plugin with php mysql and how can we use this plugin with Bootstrap. In this tutorial we will use Bootstrap library with Datatables jquery plugin and by using php script we will display mysql table data into Datatables styling with Bootstrap library. Datatables is a Jquery plugin and it is highly flexible tools for displaying data in html table. The most benefit of using this plugin into our web project is that it reduces our lots of server side code like code for pagination, code for search data from table, code for multi column ordering. It has also support different type of data source like JavaScript ajax and server side processing. It can be easily themeable with it's own Datatables, jquery user interface, Bootstrap. Here we have simple load data from mysql table by using php scipt and this we have make html table and then after we have load data into html table so our HTML table with data is ready so now we want to only activate Datatables plugin on that table so we have activate data tables plugin by using DataTable() method with table. So This method has activate functionality of Datatables plugin on table. By using this plugin we have to write less code and get more functionality like column sorting, instant searching, show number of entry on single page, pagination and many more without writing a single line of code. This plugin is easily themeable with Bootstrap library. This all advantage of using Data tables plugin into our project.
Source Code
index.php
<?php
$connect = mysqli_connect("localhost", "root", "", "testing");
$query ="SELECT * FROM tbl_employee ORDER BY ID DESC";
$result = mysqli_query($connect, $query);
?>
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Datatables Jquery Plugin with Php MySql and Bootstrap</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
</head>
<body>
<br /><br />
<div class="container">
<h3 align="center">Datatables Jquery Plugin with Php MySql and Bootstrap</h3>
<br />
<div class="table-responsive">
<table id="employee_data" class="table table-striped table-bordered">
<thead>
<tr>
<td>Name</td>
<td>Address</td>
<td>Gender</td>
<td>Designation</td>
<td>Age</td>
</tr>
</thead>
<?php
while($row = mysqli_fetch_array($result))
{
echo '
<tr>
<td>'.$row["name"].'</td>
<td>'.$row["address"].'</td>
<td>'.$row["gender"].'</td>
<td>'.$row["designation"].'</td>
<td>'.$row["age"].'</td>
</tr>
';
}
?>
</table>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#employee_data').DataTable();
});
</script>
Gracias!! thanks
ReplyDeleteHello friend , i need a help how can i implement maker /checker mechanism for data submission into the database ,assume i have registering someone(by submit create button) on my web application but so as to complete the process needed another person with system rights as mine or high rights to login and approve (by submit approve button ) so as a new registered user can start using
ReplyDeleteWhy it appears nothing to my website? did I misplace the script? is that really matter?thanks :")
ReplyDeleteIf I want to change the language of the plugin? for example to spanish, so that instead of saying "search" it says "buscar"
ReplyDeleteHere I am again. I thank webslesson so far landed here again hope this post will relieve the pain I have in my $.
ReplyDeleteORDER BY ID DESC
ReplyDeletenot working
ReplyDeletei have used your code but it i not showing all the records please help!
ReplyDeleteAdd an ID filed in your table it works
Deleteadd an ID field in your table, it will display the result
Deletethanks guys i need new lesson
ReplyDeleteGreat!!! good job my friend...
ReplyDeletesir please tell us how to use plugin in code
ReplyDeleteplease tell me how to include plugin in code
ReplyDeleteHello. Is there a correct DB dump? I've changed connecting data like host, passowrd, DB etc.. then I've created a table tbl_employee (name (varchar(60)), address (varchar(100)), gender (varchar(6)), designation (varchar(100)), age (int(3))) and added 2 strings to that table but script keeps writing: "No data available in table". Tried on 2 hosting - all the same. Wht's wrong?
ReplyDeleteWow, i was searching for this last 4 hours, i was nearly fed up, where i missed is in while loop, my php code whole results were taken as one result, so page and search function not worked. I searched everywhere for a simple solution, awesome i got yours, thanks, thanks a lot. In while loop you echoed each result, that was awesome. Thanks once again.
ReplyDeleteHow can I connect with multiple mysql servers ? please advise.
ReplyDeleteI would like to query multiple mysql databases in same script... how can i do it ?
ReplyDeleteHello, Does your datatable is responsive ????
ReplyDeleteerror datatable is not a function
ReplyDelete