PHP GRID DEMO USING AJAX
AJAX GRID Using PHP -MySQL
Source Files
grid.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>AJAX GRID DEMO</title>
<style>
#page{ width:400px; background:#F5F5F5; margin:0 auto}
h2{ color:#000033}
#updateArea{ width:400px; margin:0 auto}
table.grid {
width:100%;
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table.grid th {
border-width: 1px;
padding: 5px;
border-style: solid;
border-color: #666666;
background-color: #F7F7F7;
}
table.grid td {
border-width: 1px;
padding: 5px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>
<script>
function getProduct()
{
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200)
{
document.getElementById("updateArea").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "getProduct.php", true);
xhttp.send();
}
</script>
</head>
<body>
<div id="page">
<h2 align="center">AJAX GRID DEMO</h2>
<p align="center"><input type="submit" name="submit" value="LOAD DATA" onclick="getProduct()" /></p>
<div id="updateArea">
<hr />
Grid Uplaoded
<hr />
</div>
<p align="center">AJAX Grid Demo</p>
</div>
</body>
</html>
The above code output is
Before Loaded Grid Demo
After Loaded Grid Demo
Any issues or problem to run please leave your comment section i will help to run..
Thank You!
AJAX GRID Using PHP -MySQL
Source Files
- grid.php
- getProduct.php
- Config.php
grid.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>AJAX GRID DEMO</title>
<style>
#page{ width:400px; background:#F5F5F5; margin:0 auto}
h2{ color:#000033}
#updateArea{ width:400px; margin:0 auto}
table.grid {
width:100%;
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table.grid th {
border-width: 1px;
padding: 5px;
border-style: solid;
border-color: #666666;
background-color: #F7F7F7;
}
table.grid td {
border-width: 1px;
padding: 5px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>
<script>
function getProduct()
{
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200)
{
document.getElementById("updateArea").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "getProduct.php", true);
xhttp.send();
}
</script>
</head>
<body>
<div id="page">
<h2 align="center">AJAX GRID DEMO</h2>
<p align="center"><input type="submit" name="submit" value="LOAD DATA" onclick="getProduct()" /></p>
<div id="updateArea">
<hr />
Grid Uplaoded
<hr />
</div>
<p align="center">AJAX Grid Demo</p>
</div>
</body>
</html>
getProduct.php
<?php
include("config.php");
$gq="select *from productmaster";
$gqres=mysqli_query($con,$gq);
$sno=1;
echo "<table class='grid'>";
echo "<tr>";
echo "<th>S.NO</th>";
echo "<th>PRODUCT ID</th>";
echo "<th>PRODUCT NAME</th>";
echo "</tr>";
while($gqrow=mysqli_fetch_array($gqres))
{
$sno=$sno+1;
echo "<tr>";
echo "<td>".$sno."</td>";
echo "<td>".$gqrow["productid"]."</td>";
echo "<td>".$gqrow["productname"]."</td>";
echo "</tr>";
}
echo "</table>";
?>
config.php
<?php
$con=mysqli_connect("localhost","root","","griddemo");
if(mysqli_connect_errno())
{
echo "Failed".mysqli_connect_error();
}
?>
The above code output is
Before Loaded Grid Demo
After Loaded Grid Demo
Any issues or problem to run please leave your comment section i will help to run..
Thank You!
No comments:
Post a Comment