Thursday, 27 October 2016

Datatables Jquery Plugin with Php MySql and Bootstrap



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>  

0 comments:

Post a Comment