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

DataTable JQuery Plug-in Using PHP MySQL With Source Code

by

In this tutorial, we will use the 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.

CREATE TABLE `info` (
  `id` int(11) NOT NULL,
  `name` text NOT NULL,
  `gender` text NOT NULL,
  `age` int(11) NOT NULL,
  `address` text NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

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

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

On the index.php. Put the following codes.

<?php include 'connection.php'; ?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Datatables</title>
<link href="jquery.dataTables.css" rel="stylesheet" type="text/css"/>
http://jquery.min.js
http://jquery.dataTables.js
<style>
h3 {
text-align: center;
}
body {
width: 60%;
margin: auto;
border-left: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
padding: 10px;
}
</style>
</head>
<body>
<h3>Data Table JQUERY [PHP/MYSQL][ITSourceCode.Com]</h3>
<?php include 'data.php'; ?>

$(document).ready(function(){
$('#mytable').dataTable();
});

</body>
</html>

download jquery.dataTables jquery.dataTables jquery.min.

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

<table id="mytable" class="table table-responsive table-striped" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Age</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<?php
$info = $mysqli->query("SELECT * FROM info");
while ($data = $info->fetch_assoc()) { ?>
<tr>
<td><?php echo $data['name']; ?></td>
<td><?php echo $data['gender'] ?></td>
<td><?php echo $data['age'] ?></td>
<td><?php echo $data['address'] ?></td>
</tr>
<?php }
?>
</tbody>
</table>

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]

Leave a Comment