DataTable JQuery Plug-in Using PHP MySQL With Source Code

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.

All you need for your table are here.

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

  `id` int(11) NOT NULL,
  `name` text NOT NULL,
  `gender` text NOT NULL,
  `age` int(11) NOT NULL,
  `address` text NOT NULL

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

$mysqli = new mysqli('localhost', 'root', '', 'simple');

On the index.php. Put the following codes.

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



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%">
$info = $mysqli->query("SELECT * FROM info");
while ($data = $info->fetch_assoc()) { ?>
<td><?php echo $data['name']; ?></td>
<td><?php echo $data['gender'] ?></td>
<td><?php echo $data['age'] ?></td>
<td><?php echo $data['address'] ?></td>
<?php }

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