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` (
  `name` varchar(80) NOT NULL, 
  `gender` varchar(10) NOT NULL,
  `city` varchar(80) NOT NULL,
  `email` varchar(80) NOT NULL

2. Configuration

Create a config.php for the database connection.

Completed Code


$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 -->

<!-- Bootstrap CSS -->
[removed]"" >[removed]

<!-- Datatable JS -->


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>
   <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>

<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 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 class="form-group">
               <label for="email" >Email</label> 
               <input type="email" class="form-control" id="email" placeholder="Enter email"> 
             <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>
             <div class="form-group">
               <label for="city" >City</label> 
               <input type="text" class="form-control" id="city" placeholder="Enter city"> 

           <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>


     <!-- Table -->
     <table id='userTable' class='display dataTable' width='100%'>