This is one more post on PHP with Ajax and in this post you can find how to Append Last Inserted Data to HTML table by using Ajax with PHP script. So, we do not want to fetch whole table data from mysql database and converted into HTML table and display on web page. In simple terms, if you have use ajax with PHP, then what happen at the time of inserting of data using Ajax with PHP, in PHP script you have first run insert query command and then after you have fetch whole table data from Mysql table and convert into HTML table and send back to Ajax request.
But If you have use Ajax then why you have fetch whole table data again and again on every insert of data. But append last inserted data to existing table. So, when your script has done inserting of data, then last inserting details will be send to Ajax request in JSON format and in Ajax success function that json data will be converted into table row format and by using prepend() method we can append into HTML table. So User will fill lasted submitted data has been store under database and from database that data has been display on web in HTML table format.
Here we have do simple process of Insert data into Mysql table using PHP with Ajax and here by using jQuery which has build table row from Ajax response which has been received in JSON format. So, jQuery has append Ajax result into existing table without refresh of web page. If you have not know how to append ajax return data to HTML table then your doubt will be clear from this post. You can append data from start of the table by using jQuery prepend() method and if you want to append at the end of table then by using jQuery append() method. Below you can find complete source code and online demo also.
Source Code
index.php
ect = new PDO("mysql:host=localhost;dbname=testing", "root", "");
$query = "SELECT * FROM tbl_sample ORDER BY id DESC";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
?>
<html>
<head>
<title>How to Use Ajax PHP to Append Last Inserted Data to HTML Tables | Using AJAX to append database rows to HTML tables</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<br />
<br />
<h2 align="center">How to Use Ajax PHP to Append Last Inserted Data to HTML Tables</h2><br />
<h3 align="center">Add Details</h3>
<br />
<form method="post" id="add_details">
<div class="form-group">
<label>First Name</label>
<input type="text" name="first_name" class="form-control" required />
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" name="last_name" class="form-control" required />
</div>
<div class="form-group">
<input type="submit" name="add" id="add" class="btn btn-success" value="Add" />
</div>
</form>
<br />
<h3 align="center">View Details</h3>
<br />
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody id="table_data">
<?php
foreach($result as $row)
{
echo '
<tr>
<td>'.$row["first_name"].'</td>
<td>'.$row["last_name"].'</td>
</tr>
';
}
?>
</tbody>
</table>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#add_details').on('submit', function(event){
event.preventDefault();
$.ajax({
url:"insert.php",
method:"POST",
data:$(this).serialize(),
dataType:"json",
beforeSend:function(){
$('#add').attr('disabled', 'disabled');
},
success:function(data){
$('#add').attr('disabled', false);
if(data.first_name)
{
var html = '<tr>';
html += '<td>'+data.first_name+'</td>';
html += '<td>'+data.last_name+'</td></tr>';
$('#table_data').prepend(html);
$('#add_details')[0].reset();
}
}
})
});
});
</script>
insert.php
<?php
//insert.php
$connect = new PDO("mysql:host=localhost;dbname=testing", "root", "");
$data = array(
':first_name' => $_POST["first_name"],
':last_name' => $_POST["last_name"]
);
$query = "
INSERT INTO tbl_sample
(first_name, last_name)
VALUES (:first_name, :last_name)
";
$statement = $connect->prepare($query);
if($statement->execute($data))
{
$output = array(
'first_name' => $_POST['first_name'],
'last_name' => $_POST['last_name']
);
echo json_encode($output);
}
?>
KD SOFTWARE is a Software & Website Designing Company In AGRA, Mainpuri, Mathura, Firozabad, Etah, Shahjahanpur UP (India). KD SOFTWARE developed Customize Software based on platforms and technologies, Such as .Net, PHP, HTML,JavaScript,CSS and as per the market requirements.Developers in our Team KD SOFTWARE have experience of carrying out complex and large scale web applications of various Design themes. KD SOFTWARE provides numerous services comprise of Website Designing & Development, .Net Programming, Software Testing, PHP Programming, Software Development, Bulk sms/SEO/Digital Marketing in Agra
ReplyDeleteContact No : +91 9761853561, +91 8384874946
Software Company in Agra
IT Company in Agra
IT Company in Noida
IT Company in India
IT Company in Delhi NCR
Website Designing in Agra
Website Designing in India
Website Designing in Delhi
Website Designing in Noida NCR
Website Designing Company in Agra
Web Design in Agra
Web Design Agra
Software Company Agra
Accounting Software Company in Agra
ERP Software Company in Agra
SEO Company in Agra
website design company
Top 10 Software Company in Agra
Top It Company in Agra
IT Company
can u tell me how i can pass the fetch data to html table inside modal popupn using ajax dn jquery??
ReplyDeletethis is a commet
ReplyDeletei'm sorry i just try your comment system (^__^)
ReplyDelete