Hi, guys today I will discuss about jQuery DataTable. There has a good feature of jQuery DataTable plug-in, you can implement on your website. If you have a large number of records into the database and you want to display in a page from the database so, this tutorial for you.
Many people are know that DataTable is a Plug-in for the jQuery JavaScript library. It is a highly flexible tool, based on the foundations of progressive increment, and it will add advanced integration controls like pagination, Instant Search, and multi-column ordering to any HTML table.
If you are using PHP language or any PHP framework for your website development, you can fetch all user details from the database and display in a single page. When you fetch user information in a table using the loop, if you have too much information, you need to use a DataTable.
I hope that you already stored many users information into the database tables using insert query. You have already fetched all user records in an HTML table using for or while loop. After doing that much what you have to do to use this jQuery DataTables Plug-in is mentioned in below example.
Example Code:
<?php include "db_connect.php"; ?> <!DOCTYPE html> <html> <head> <title></title> <style> table,tr,td{ border: 1px solid #000; } </style> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css"> <script type="text/javascript" src="//code.jquery.com/jquery-1.12.4.js" ></script> <script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js" ></script> <script type="text/javascript"> $(document).ready(function(){ $("#example").DataTable(); }); </script> </head> <body> <h3>jQuery DataTable Example</h3> <table id="example"> <thead> <tr> <td>Id</td> <td>First Name</td> <td>Last Name</td> <td>Email</td> </tr> </thead> <tbody> <?php $sql=mysqli_query($con, "SELECT * FROM TABLE") while($row = mysqli_fetch_array($sql)) { ?> <tr> <td><?php echo $row[1];?></td> <td><?php echo $row[2];?></td> <td><?php echo $row[3];?></td> <td><?php echo $row[4];?></td> </tr> <?php } ?> </tbody> </table> </body> </html>