DataTable JQuery Plug-in To Make Google-Like Search Engine Using PHP/MySQL

0
281

In this tutorial, we will use DataTable JQuery plug-in found Javascript Library to make Google-Like Search Engine Using PHP/MySQL. This will used in It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table.

  • Pagination, instant search, and multi-column ordering
  • Support almost any data source: DOM, Javascript, Ajax, and server-side processing.
  • Easily theme-able: DataTables, jQuery UI, Bootstrap, Foundation
  • A wide variety of extensions inc. Editor, Buttons, FixedColumns and more.
  • Extensive options and a beautiful, expressive API.
  • Full internationalise.
  • Professional Quality: backed by a suite of 2900+ unit tests.
  • Free open source software (MIT license)! Commercial support available.

http://www.datatables.net

All you need for your table are here.

First, create your own database. Name it as “simple“. Then put the table below.

  1. [crayon-5a3568d97806b712624580/]

Then create a “connection.php” file and put the following codes.

  1. <?php
  2. $mysqli = new mysqli('localhost', 'root', '', 'simple');
  3. ?>

On the index.php. Put the following codes.

  1. <?php include 'connection.php'; ?>
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>Datatables</title>
  7. <link href="jquery.dataTables.css" rel="stylesheet" type="text/css"/>
  8. <a href="http://jquery.min.js">http://jquery.min.js</a>
  9. <a href="http://jquery.dataTables.js">http://jquery.dataTables.js</a>
  10. &lt;style&gt;
  11. h3 {
  12. text-align: center;
  13. }
  14. body {
  15. width: 60%;
  16. margin: auto;
  17. border-left: 1px solid #c0c0c0;
  18. border-right: 1px solid #c0c0c0;
  19. padding: 10px;
  20. }
  21. &lt;/style&gt;
  22. &lt;/head&gt;
  23. &lt;body&gt;
  24. &lt;h3&gt;Data Table JQUERY [PHP/MYSQL][ITSourceCode.Com]&lt;/h3&gt;
  25. &lt;?php include 'data.php'; ?&gt;
  26.  
  27. $(document).ready(function(){
  28. $('#mytable').dataTable();
  29. });
  30.  
  31. &lt;/body&gt;
  32. &lt;/html&gt;

download jquery.dataTables jquery.dataTables jquery.min.

Create “data.php” file then put the following codes.

  1. &lt;table id="mytable" class="table table-responsive table-striped" width="100%"&gt;
  2. &lt;thead&gt;
  3. &lt;tr&gt;
  4. &lt;th&gt;Name&lt;/th&gt;
  5. &lt;th&gt;Gender&lt;/th&gt;
  6. &lt;th&gt;Age&lt;/th&gt;
  7. &lt;th&gt;Address&lt;/th&gt;
  8. &lt;/tr&gt;
  9. &lt;/thead&gt;
  10. &lt;tbody&gt;
  11. &lt;?php
  12. $info = $mysqli-&gt;query("SELECT * FROM info");
  13. while ($data = $info-&gt;fetch_assoc()) { ?&gt;
  14. &lt;tr&gt;
  15. &lt;td&gt;&lt;?php echo $data['name']; ?&gt;&lt;/td&gt;
  16. &lt;td&gt;&lt;?php echo $data['gender'] ?&gt;&lt;/td&gt;
  17. &lt;td&gt;&lt;?php echo $data['age'] ?&gt;&lt;/td&gt;
  18. &lt;td&gt;&lt;?php echo $data['address'] ?&gt;&lt;/td&gt;
  19. &lt;/tr&gt;
  20. &lt;?php }
  21. ?&gt;
  22. &lt;/tbody&gt;
  23. &lt;/table&gt;

Sample output of DataTable JQuery Plug-in To Make Google-Like Search Engine Using PHP/MySQL

Related Article you may like: Simple Edit Data Using PHP and MYSQL [Responsive Page]

Facebook Comments

LEAVE A REPLY

Please enter your comment!
Please enter your name here