Contents

  1. Table structure
  2. Configuration
  3. Download & Include
  4. HTML
  5. PHP
  6. jQuery
  7. Output
  8. Conclusion

1. Table structure

Create users table and I have already added some records into the tables.

CREATE TABLE `users` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `name` varchar(80) NOT NULL, 
  `gender` varchar(10) NOT NULL,
  `city` varchar(80) NOT NULL,
  `email` varchar(80) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;


2. Configuration

Create a config.php for the database connection.

Completed Code

<?php

$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "tutorial"; /* Database name */

$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
  die("Connection failed: " . mysqli_connect_error());
}
?>


3. Download & Include

  • Download details from here with Bootstrap from here.
  • Enter datatables.min.css, bootstrap.min.css, jQuery library, bootstrap.min.js, and datatables.min.js in the <head> section.
  • You can also use a CDN.
<!-- Datatable CSS -->
<link href='text/css'>

<!-- Bootstrap CSS -->
<link rel=

<!-- jQuery Library -->
[removed]"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">[removed]

<!-- Bootstrap CSS -->
[removed]"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" >[removed]

<!-- Datatable JS -->
[removed]"//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js">[removed]


4. HTML

Create a

mode to add user details. Created a hidden field for storing the user's custom id and <button id = "btn_save"> to refresh the user with a click.

Show user list in

. In the last column, show the edit and delete button.

Completed Code

<!doctype html>
<html>
<head>
   <title>Edit delete DataTables record with AJAX and PHP</title>

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <!-- Datatable CSS -->
   <link href='DataTables/datatables.min.css' rel='stylesheet' type='text/css'>

   <!-- Bootstrap CSS -->
   <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">

   <!-- jQuery Library -->
   <script src="jquery-3.5.1.min.js"></script>

   <!-- Bootstrap JS -->
   <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

   <!-- Datatable JS -->
   <script src="DataTables/datatables.min.js"></script>

</head>
<body >

   <div class='container'>

     <!-- Modal -->
     <div id="updateModal" class="modal fade" role="dialog">
       <div class="modal-dialog">

         <!-- Modal content-->
         <div class="modal-content">
           <div class="modal-header">
             <h4 class="modal-title">Update</h4>
             <button type="button" class="close" data-dismiss="modal">×</button> 
           </div>
           <div class="modal-body">
             <div class="form-group">
               <label for="name" >Name</label>
               <input type="text" class="form-control" id="name" placeholder="Enter name" required> 
             </div>
             <div class="form-group">
               <label for="email" >Email</label> 
               <input type="email" class="form-control" id="email" placeholder="Enter email"> 
             </div> 
             <div class="form-group">
               <label for="gender" >Gender</label>
               <select id='gender' class="form-control">
                 <option value='male'>Male</option>
                 <option value='female'>Female</option>
               </select> 
             </div> 
             <div class="form-group">
               <label for="city" >City</label> 
               <input type="text" class="form-control" id="city" placeholder="Enter city"> 
             </div>

           </div>
           <div class="modal-footer">
             <input type="hidden" id="txt_userid" value="0">
             <button type="button" class="btn btn-success btn-sm" id="btn_save">Save</button>
             <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Close</button>
           </div>
         </div>

       </div>
     </div>

     <!-- Table -->
     <table id='userTable' class='display dataTable' width='100%'>
       <thead>
         <tr>
           <th>Name</th>
           <th>Email</th>
           <th>Gender</th>
           <th>City</th>
           <th>Action</th>
         </tr>
       </thead>
     </table>

   </div>

</body>
</html>