Tuesday 11 February 2014

Working with Jquery datatable with dynamic data using PHP and Mysql

DataTables is a powerful jQuery plugin for creating table listings and adding interactions to them. It provides searching, sorting and pagination without any configuration. In this article we’ll go through the basics of DataTable and how to use some of the advanced features.

STEP 1 :- Create Database and Table.

We take Example : we create table user in which username and email_id is shown.




STEP 2 :- Now Create Connection in your PHP Page and Connect database with this table .

HERE is the Complete Code of PHP Page : 


<?php
$con = mysqli_connect('localhost','root','','test');
$sqlselect = mysqli_query($con,"SELECT * FROM User");
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">

<title>DataTables example - Zero configuration</title>
<link rel="stylesheet" type="text/css" href="media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="resources/demo.css">
<style type="text/css" class="init">

</style>
<script type="text/javascript" language="javascript" src="media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">


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


</script>
</head>

<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Dynamic with PHP and MYSQL</span></h1>

<div class="info">
<p>DataTables has most features enabled by default, so all you need to do to use it with your own
tables is to call the construction function.</p>

<p>Searching, ordering, paging etc goodness will be immediately added to the table, as shown in this
example.</p>
</div>

<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>USERNAME</th>
<th>EMAIL-ID</th>
</tr>
</thead>

<tfoot>
<tr>
<th>ID</th>
<th>USERNAME</th>
<th>EMAIL-ID</th>
</tr>
</tfoot>

<tbody>
<?php
while($rowselect = mysqli_fetch_array($sqlselect))
{
echo"<tr>
<td>".$rowselect['ID']."</td>
<td>".$rowselect['usernam']."</td>
<td>".$rowselect['email']."</td>
</tr>";
}
?>
</tbody>
</table>
</div>
</body>
</html>
You Can Download It From Here : Click Here

For Any Query Please Write a comment !!

Thanks