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>  

20 comments:

  1. Hello 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

    ReplyDelete
  2. Why it appears nothing to my website? did I misplace the script? is that really matter?thanks :")

    ReplyDelete
  3. If I want to change the language of the plugin? for example to spanish, so that instead of saying "search" it says "buscar"

    ReplyDelete
  4. Here I am again. I thank webslesson so far landed here again hope this post will relieve the pain I have in my $.

    ReplyDelete
  5. i have used your code but it i not showing all the records please help!

    ReplyDelete
    Replies
    1. Add an ID filed in your table it works

      Delete
    2. add an ID field in your table, it will display the result

      Delete
  6. Great!!! good job my friend...

    ReplyDelete
  7. sir please tell us how to use plugin in code

    ReplyDelete
  8. please tell me how to include plugin in code

    ReplyDelete
  9. Hello. 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?

    ReplyDelete
  10. Wow, 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.

    ReplyDelete
  11. How can I connect with multiple mysql servers ? please advise.

    ReplyDelete
  12. I would like to query multiple mysql databases in same script... how can i do it ?

    ReplyDelete
  13. Hello, Does your datatable is responsive ????

    ReplyDelete
  14. error datatable is not a function

    ReplyDelete