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

0
212

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. <pre>CREATE TABLE `info` (
  2.   `id` int(11) NOT NULL,
  3.   `name` text NOT NULL,
  4.   `gender` text NOT NULL,
  5.   `age` int(11) NOT NULL,
  6.   `address` text NOT NULL
  7. ) ENGINE=MyISAM DEFAULT CHARSET=latin1;</pre>

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

  1. &lt;?php
  2. $mysqli = new mysqli('localhost', 'root', '', 'simple');
  3. ?&gt;

On the index.php. Put the following codes.

  1. &lt;?php include 'connection.php'; ?&gt;
  2. &lt;!DOCTYPE html&gt;
  3. &lt;html&gt;
  4. &lt;head&gt;
  5. &lt;meta charset="UTF-8"&gt;
  6. &lt;title&gt;Datatables&lt;/title&gt;
  7. &lt;link href="jquery.dataTables.css" rel="stylesheet" type="text/css"/&gt;
  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
(Visited 211 times, 2 visits today)

LEAVE A REPLY

Please enter your comment!
Please enter your name here