Create Live Editable Table with jQuery AJAX using PHP MySQLi

Today, We want to share with you live table edit with jquery and ajax php.In this post we will show you add edit delete rows dynamically using jquery and php, hear for Table Edit and Delete With Jquery Ajax PHP and MYSQL With Demo and Download we will give you demo and example for implement.In this post, we will learn about PHP MySQL Inline Editing Dynamically Using JQuery Ajax with an example.

Live Table Edit with Jquery and Ajax

Include Library

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="jquery.tabledit.js"></script>

HTML Code

index.php

<?php   
include('config.php');
$results1 = mysqli_query($link,"SELECT * FROM members_list");
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="jquery.tabledit.js"></script>
 
</head>
<script type="text/javascript">
 
$(document).ready(function(){
    
$('#example1').Tabledit({
    url: 'logic-edit-delete.php',
    columns: {
        identifier: [0, 'id'],
        editable: [[1, 'name'], [2, 'email']]
    },
    onDraw: function() {
        console.log('onDraw()');
    },
    onSuccess: function(data, textStatus, jqXHR) {
        console.log('onSuccess(data, textStatus, jqXHR)');
        console.log(data);
        console.log(textStatus);
        console.log(jqXHR);
    },
    onFail: function(jqXHR, textStatus, errorThrown) {
        console.log('onFail(jqXHR, textStatus, errorThrown)');
        console.log(jqXHR);
        console.log(textStatus);
        console.log(errorThrown);
    },
    onAlways: function() {
        console.log('onAlways()');
    },
    onAjax: function(action, serialize) {
        console.log('onAjax(action, serialize)');
        console.log(action);
        console.log(serialize);
    }
    });
 
 
});
 
</script>
<style>
 
.table.user-select-none {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
</style>
 
</head>
<body>
 
 <div class="container" style="margin-top:80px;">
    <div class="panel panel-default">
        <div class="panel-heading">
            <a href="http://www.pakainfo.com/live-table-edit-and-delete-with-jquery-ajax-php-and-mysql-with-demo/" target="_blank" rel="noopener"><h2>Table Edit and Delete With Jquery Ajax PHP and MYSQL With Demo</h2></a> 
        </div>
       
        <div class="panel-body"> 
        <table class="table" id="example1" style="border:1px solide red">
        <tr><th>Id</th><th>Name<th></th><th>Email<th></tr>
        <?php while($results = mysqli_fetch_assoc($results1)) {?>
        <tr>
            <td><?php echo $results['id'];?></td>
            <td><?php echo $results['name']; ?></td>
            <td><?php echo $results['email']; ?></td>
        </tr>
        <?php } ?>
        </table>
        </div>
       <h2>Table Edit and Delete With Jquery Ajax PHP and MYSQL With Demo - www.pakainfo.com</h2>
      <div class="panel-footer"><a href="http://www.pakainfo.com/" target="_blank" rel="noopener">All Right Reserved pakainfo</a> 
      </div>
 
    </div>
  </div>
 
</body>
</html>

Databse Connection

config.php

$link=mysqli_connect('your_database_server_name', 'root_or_uname', '[email protected]', 'dspsalon');
 //Check connection
 if (mysqli_connect_errno())
 {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
 }

PHP CODE

logic-edit-delete.php

<?php

include('config.php');
 
$member_data = filter_input_array(INPUT_POST);
 
if ($member_data['action'] === 'edit') 
{   
    $sql = "UPDATE members_list SET name ='" . $member_data['name'] . "', email='" . $member_data['email'] . "'" ." WHERE id='" . $member_data['id'] . "'";
    
    mysqli_query($link,$sql);
} 
if ($member_data['action'] === 'delete') 
{
    mysqli_query($link,"DELETE FROM members_list   WHERE id='" . $member_data['id'] . "'");
} 
 
 
mysqli_close($mysqli);
 
echo json_encode($member_data);
?>

I hope you get an idea about ajax add edit delete records in database using php.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.