Tuesday 30 April 2019

How to Append Database Rows to HTML Table using Ajax with PHP



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);
}

?>





4 comments:

  1. 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
    Contact 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

    ReplyDelete
  2. can u tell me how i can pass the fetch data to html table inside modal popupn using ajax dn jquery??

    ReplyDelete
  3. i'm sorry i just try your comment system (^__^)

    ReplyDelete