how to use Jquery data table with php and mysql???
The following code will display your mysql data in the Jquery datatable plugin which will have search option and sorting pagination in default. And also it is a client side scripting so it will work faster. you can export your table data’s in PDF excel using the same plugin.
In the below code replace your mysql password, your table name and column name. Download the other required file here.
Code:
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css”>
<style type=”text/css” title=”currentStyle”>
@import “media/css/demo_page.css”; @import “/media/css/header.css”;
@import “media/css/demo_table_jui.css”;
@import “media/css/jquery-ui-1.8.4.custom.css”;
@import “media/css/TableTools_JUI.css”;
</style>
</head><body>
<?php
$con=mysqli_connect(“localhost”,”root”,”password”,”databasename”);
if (mysqli_connect_errno())
{
echo “Failed to connect to MySQL: ” . mysqli_connect_error();
}
?>
<div></div>
<table id=”example”>
<thead>
<tr><th>table_heads</th>
<th>table_heads</th></tr>
</thead>
<tbody>
<?php
$sql=”select * from table_name”;
$result=mysqli_query($con,$sql);
while($row=mysqli_fetch_array($result))
{
?>
<tr>
<td><?php echo $row[‘column_name’];?></td><td><?php echo $row[‘column_name’];?></td>
<td><?php echo $row[‘column_name’];?></td>
</tr>
<?php
}
?>
</tbody>
</table>
<script type=”text/javascript” charset=”utf8″ src=”http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js”></script>
<script type=”text/javascript” charset=”utf8″ src=”http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js”></script>
<script type=”text/javascript” charset=”utf-8″ src=”media/js/ZeroClipboard.js”></script>
<script type=”text/javascript” charset=”utf-8″ src=”media/js/TableTools.js”></script>
<script type=”text/javascript” charset=”utf-8″>
$(document).ready( function () {
$(‘#example’).dataTable( {
“aaSorting”: [[ 4, “desc” ]],
“bJQueryUI”: true,
“sPaginationType”: “full_numbers”,
“sDom”: ‘<“H”Tfr>t<“F”ip>’,
“oTableTools”: {
“aButtons”: [
“copy”, “csv”, “xls”, “pdf”,
{
“sExtends”: “collection”,
“sButtonText”: “Save”,
“aButtons”: [ “csv”, “xls”, “pdf” ]
}
]
}
} );
} );
</script>
</body>
</html>
T.mahes's Blog 