Sunday 14 February 2016

Live Table Add Edit Delete using Ajax Jquery in PHP Mysql




Latest Post - Live Add Edit Delete Datatables Records using PHP Ajax


Hello Friends, In this tutorial we are going to learn how to live table Insert, Update, Delete and Fetch data from mysql database using Ajax Jquery in PHP programming language. For this feature I am using html5 contenteditable attribute. With the help of this contenteditable attribute table column will be editable and user can change live table data on single click. I am using Ajax call function for Insert data, update data, delete data and Select data from database. This all things are done on user end without page refresh. Ajax get request from user on front-end and send request to database using php language and done operation at back end and send back request to user without page refresh. This feature is very helpful. I hope this tutorial will help to all.






<div id="live_data"></div>

This is main page on which we have load data, so on this page first we have define one div tag with attribute "id=live_data", we will load data under this tag by using Ajax Jquery code and it will use attribute id as selector in Jquery code.

      function fetch_data()  
      {  
           $.ajax({  
                url:"select.php",  
                method:"POST",  
                success:function(data){  
                     $('#live_data').html(data);  
                }  
           });  
      } 

Then after make this jquery function, which fetch data from table and converted in table format and then after display under div tag with attribute "id=live_data", under this function, it use Ajax method for fetch data from server and display on web page. This function send request to this select.php page.

<?php  
 $connect = mysqli_connect("localhost", "root", "", "test_db");  
 $output = '';  
 $sql = "SELECT * FROM tbl_sample 

ORDER BY id DESC";  
 $result = mysqli_query($connect, $sql);  
 $output .= '  
      <div class="table-responsive">  
           <table class="table table-bordered">  
                <tr>  
                     <th width="10%">Id</th>  
                     <th width="40%">First Name</th>  
                     <th width="40%">Last Name</th>  
                     <th width="10%">Delete</th>  
                </tr>';  
 if(mysqli_num_rows($result) > 0)  
 {  
      while($row = 

mysqli_fetch_array($result))  
      {  
           $output .= '  
                <tr>  
                     <td>'.

$row["id"].'</td>  
                     <td class="first_name" data-id1="'.$row["id"].'" contenteditable>'.$row["first_name"].'</td>  
                     <td class="last_name" data-id2="'.$row["id"].'" contenteditable>'.$row["last_name"].'</td>  
                     <td><button type="button" name="delete_btn" data-

id3="'.$row["id"].'" class="btn btn-xs btn-

danger btn_delete">x</button></td>  
                </tr>  
           ';  
      }  
      $output .= '  
           <tr>  
                <td></td>  
                <td id="first_name" contenteditable></td>  
                <td id="last_name" contenteditable></td>  
                <td><button type="button" name="btn_add" id="btn_add" 

class="btn btn-xs btn-success">+</button></td>  
           </tr>  
      ';  
 }  
 else  
 {  
      $output .= '<tr>  
                          <td colspan="4">Data not Found</td>  
                     </tr>';  
 }  
 $output .= '</table>  


      </div>';  
 echo $output;  
 ?>

This php code write on select.php page, because fetch_data() jquery function send request to this page, on this page it will fetch data from table and then convert that data into HTML Table format and send back to fetch_data() function.

You can see under while loop we have store data in table format, in first <td> tag it will store id, in second and third <td> tag attribute we have define class, in second have write class="first_name" and in third we have write class="last_name", we will use this attribute class in jquery code for live edit or update of table data.





Then after in both tag we have also add data attribute tag with two different name. In this tag we have store id of data, value of this data attribute we will use in jquery code while live updating of data.

In Both tag we have also use one more HTML attribute like contenteditable, by using this attribute we can live change the text or value this <td> tag. So this way we have define different attribute in second and third <td> tag.

In Fourth <td> tag we have define delete button for removing live data without page refresh, Under this delete button we have store unique id in data attribute, value of this data attribute we can fetch in Jquery code while live remove or delete of particular records. In this button tag we have add on class="btn_delete". We will use this class as selector in Jquery code.





In this code in outside of while loop we have also define one table row with four <td> tag, in second and third <td> tag we have define unique id attribute to both tag. We have use this id attribute as selector in JQuery code and by using this id we can get the text of <td> tag in Jquery code. In both <td> tag we have write one more attribute like contenteditable, by using this attribute we can live edit the text of this tag. In last <td> tag we have define one button for Add new live records, in that button we have use id attribute for selector in JQuery code. We will write Jquery code for Live Insert or Add new records on this button.


fetch_data();

So In backend our code is ready for fetching data and we have already make jquery function for load data on we page, so we have called this function, so when page load, this function will be called and it will load data on web page in HTML Table format.

      $(document).on('click', '#btn_add', function(){  
           var first_name = $('#first_name').text();  
           var last_name = $('#last_name').text();  
           if(first_name == '')  
           {  
                alert("Enter First Name");  
                return false;  
           }  
           if(last_name == '')  
           {  
                alert("Enter Last Name");  
                return false;  
           }  
           $.ajax({  
                url:"insert.php",  
                method:"POST",  
                data:{first_name:first_name, last_name:last_name},  
                dataType:"text",  
                success:function(data)  
                {  
                     alert(data);  
                     fetch_data();  
                }  
           })  
      });

This JQuery code is for Live Insert or Add of Data into Mysql Table. We have write Jquery code on Button with id="btn_add" on click event. When we have click on This button then it will Insert data into table. Under this first we have fetch text from <td> tag by selecting attribute id. After fetching value from <td> tag then it will check both variable has some value or not. If both value has some value then it will make Ajax request and send to insert.php page. With Ajax request it will send value of both <td> tag to server. After successfully request send and received it will reload table data by calling fetch_data() function.

<?php  
 $connect = mysqli_connect("localhost", "root", "", "test_db");  
 $sql = "INSERT INTO tbl_sample(first_name, last_name) VALUES('".$_POST["first_name"]."', '".$_POST["last_name"]."')";  
 if(mysqli_query($connect, $sql))  
 {  
      echo 'Data Inserted';  
 }  
 ?>

This is php code written on insert.php page, This page will received data from Ajax request and on this page it will make Insert Query for Inserting or Adding data into Mysql Table and it will send respond to Ajax request by write echo statement.

      function edit_data(id, text, column_name)  
      {  
           $.ajax({  
                url:"edit.php",  
                method:"POST",  
                data:{id:id, text:text, column_name:column_name},  
                dataType:"text",  
                success:function(data){  
                     alert(data);  
                }  
           });  
      }

After Successfully Live Insert or Add data, now we want to edit data, so in Jquery code we have make this edit_data(id, text, column_name) function with three argument. Value of All argument data has been send to edit.php page.

<?php  
 $connect = mysqli_connect("localhost", "root", "", "test_db");  
 $id = $_POST["id"];  
 $text = $_POST["text"];  
 $column_name = $_POST["column_name"];  
 $sql = "UPDATE tbl_sample SET ".$column_name."='".$text."' WHERE id='".$id."'";  
 if(mysqli_query($connect, $sql))  
 {  
      echo 'Data Updated';  
 }  
 ?>

Above code is written under edit.php page, and this page will received data from Ajax request and then after it will make Update query and execute query and update particular id of data in Mysql Table.

      $(document).on('blur', '.first_name', function(){  
           var id = $(this).data("id1");  
           var first_name = $(this).text();  
           edit_data(id, first_name, "first_name");  
      });

Above Jquery code is write for Live Update or Edit of table column first_name, We have write JQuery code on <td> tag with class selector on blur event, So when we have leave first_name <td> tag then this code will execute. Under this function it will received id from data-id1 attribute and text of first name get from <td> class attribute with text() method. This method will fetch text from <td> tag and store into one variable. Then after we have called edit_data() function which send Ajax request to edit.php page and then after it will update or edit first_name table column data.

      $(document).on('blur', '.last_name', function(){  
           var id = $(this).data("id2");  
           var last_name = $(this).text();  
           edit_data(id,last_name, "last_name");  
      });

Above Jquery code is write for Live Update or Edit of table column last_name, We have write JQuery code on <td> tag with class selector on blur event, So when we have leave last_name <td> tag then this code will execute. Under this function it will received id from data-id2 attribute and text of last name get from <td> class attribute with text() method. This method will fetch text from <td> tag and store into one variable. Then after we have called edit_data() function which send Ajax request to edit.php page and then after it will update or edit last_name table column data.

      $(document).on('click', '.btn_delete', function(){  
           var id=$(this).data("id3");  
           if(confirm("Are you sure you want to delete this?"))  
           {  
                $.ajax({  
                     url:"delete.php",  
                     method:"POST",  
                     data:{id:id},  
                     dataType:"text",  
                     success:function(data){  
                          alert(data);  
                          fetch_data();  
                     }  
                });  
           }  
      });  

Above JQuery code is write for Live Delete or Remove Mysql table data. We have write JQuery code on button with class="btn_delete", we have use this class as selector in this Jquery code, so When we have click on delete button then this code will execute. Under this first we have get id from button attribute data-id3. In which we have store unique id. Then after it has send Ajax request to delete.php page. With Ajax request it has been send value of id variable to delete.php page. In Ajax request it will received respond from server and then after it has called fetch_data() functio for refresh table table on web page.

<?php  
 $connect = mysqli_connect("localhost", "root", "", "test_db");  
 $sql = "DELETE FROM tbl_sample WHERE id = '".$_POST["id"]."'";  
 if(mysqli_query($connect, $sql))  
 {  
      echo 'Data Deleted';  
 }  
 ?>

Above PHP Code is written on delete.php page. This page has been received data from Ajax request and then after it will delete query and remove or delete data from Mysql Table and send respond to Ajax method.






So this is my sample code for making system like Live table Insert Update Delete and Fetch of Mysql Table data by using PHP Script with Ajax JQuery method. This is a single page web application. You can perform all operation on single page without going to another page. If you have any query or inputs, just comment your query or inputs in comment box. We will help you.

Complete Source Code


index.php


<html>  
      <head>  
           <title>Live Table Data Edit</title>  
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
      </head>  
      <body>  
           <div class="container">  
                <br />  
                <br />  
                <br />  
                <div class="table-responsive">  
                     <h3 align="center">Live Table Add Edit Delete using Ajax Jquery in PHP Mysql</h3><br />  
                     <div id="live_data"></div>                 
                </div>  
           </div>  
      </body>  
 </html>  
 <script>  
 $(document).ready(function(){  
      function fetch_data()  
      {  
           $.ajax({  
                url:"select.php",  
                method:"POST",  
                success:function(data){  
                     $('#live_data').html(data);  
                }  
           });  
      }  
      fetch_data();  
      $(document).on('click', '#btn_add', function(){  
           var first_name = $('#first_name').text();  
           var last_name = $('#last_name').text();  
           if(first_name == '')  
           {  
                alert("Enter First Name");  
                return false;  
           }  
           if(last_name == '')  
           {  
                alert("Enter Last Name");  
                return false;  
           }  
           $.ajax({  
                url:"insert.php",  
                method:"POST",  
                data:{first_name:first_name, last_name:last_name},  
                dataType:"text",  
                success:function(data)  
                {  
                     alert(data);  
                     fetch_data();  
                }  
           })  
      });  
      function edit_data(id, text, column_name)  
      {  
           $.ajax({  
                url:"edit.php",  
                method:"POST",  
                data:{id:id, text:text, column_name:column_name},  
                dataType:"text",  
                success:function(data){  
                     alert(data);  
                }  
           });  
      }  
      $(document).on('blur', '.first_name', function(){  
           var id = $(this).data("id1");  
           var first_name = $(this).text();  
           edit_data(id, first_name, "first_name");  
      });  
      $(document).on('blur', '.last_name', function(){  
           var id = $(this).data("id2");  
           var last_name = $(this).text();  
           edit_data(id,last_name, "last_name");  
      });  
      $(document).on('click', '.btn_delete', function(){  
           var id=$(this).data("id3");  
           if(confirm("Are you sure you want to delete this?"))  
           {  
                $.ajax({  
                     url:"delete.php",  
                     method:"POST",  
                     data:{id:id},  
                     dataType:"text",  
                     success:function(data){  
                          alert(data);  
                          fetch_data();  
                     }  
                });  
           }  
      });  
 });  
 </script>

select.php



<?php  
 $connect = mysqli_connect("localhost", "root", "", "test_db");  
 $output = '';  
 $sql = "SELECT * FROM tbl_sample ORDER BY id DESC";  
 $result = mysqli_query($connect, $sql);  
 $output .= '  
      <div class="table-responsive">  
           <table class="table table-bordered">  
                <tr>  
                     <th width="10%">Id</th>  
                     <th width="40%">First Name</th>  
                     <th width="40%">Last Name</th>  
                     <th width="10%">Delete</th>  
                </tr>';  
 if(mysqli_num_rows($result) > 0)  
 {  
      while($row = mysqli_fetch_array($result))  
      {  
           $output .= '  
                <tr>  
                     <td>'.$row["id"].'</td>  
                     <td class="first_name" data-id1="'.$row["id"].'" contenteditable>'.$row["first_name"].'</td>  
                     <td class="last_name" data-id2="'.$row["id"].'" contenteditable>'.$row["last_name"].'</td>  
                     <td><button type="button" name="delete_btn" data-id3="'.$row["id"].'" class="btn btn-xs btn-danger btn_delete">x</button></td>  
                </tr>  
           ';  
      }  
      $output .= '  
           <tr>  
                <td></td>  
                <td id="first_name" contenteditable></td>  
                <td id="last_name" contenteditable></td>  
                <td><button type="button" name="btn_add" id="btn_add" class="btn btn-xs btn-success">+</button></td>  
           </tr>  
      ';  
 }  
 else  
 {  
      $output .= '<tr>  
                          <td colspan="4">Data not Found</td>  
                     </tr>';  
 }  
 $output .= '</table>  
      </div>';  
 echo $output;  
 ?>

insert.php


<?php  
 $connect = mysqli_connect("localhost", "root", "", "test_db");  
 $sql = "INSERT INTO tbl_sample(first_name, last_name) VALUES('".$_POST["first_name"]."', '".$_POST["last_name"]."')";  
 if(mysqli_query($connect, $sql))  
 {  
      echo 'Data Inserted';  
 }  
 ?> 

edit.php


<?php  
 $connect = mysqli_connect("localhost", "root", "", "test_db");  
 $id = $_POST["id"];  
 $text = $_POST["text"];  
 $column_name = $_POST["column_name"];  
 $sql = "UPDATE tbl_sample SET ".$column_name."='".$text."' WHERE id='".$id."'";  
 if(mysqli_query($connect, $sql))  
 {  
      echo 'Data Updated';  
 }  
 ?>

delete.php


<?php  
 $connect = mysqli_connect("localhost", "root", "", "test_db");  
 $sql = "DELETE FROM tbl_sample WHERE id = '".$_POST["id"]."'";  
 if(mysqli_query($connect, $sql))  
 {  
      echo 'Data Deleted';  
 }  
 ?>

77 comments:

  1. Esta es la BD pero no funciona, puede decir porque?


    -- phpMyAdmin SQL Dump
    -- version 4.5.1
    -- http://www.phpmyadmin.net
    --
    -- Servidor: 127.0.0.1
    -- Tiempo de generación: 20-03-2016 a las 22:46:05
    -- Versión del servidor: 10.1.9-MariaDB
    -- Versión de PHP: 5.6.15

    SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
    SET time_zone = "+00:00";


    /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
    /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
    /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
    /*!40101 SET NAMES utf8mb4 */;

    --
    -- Base de datos: `test_db`
    --

    -- --------------------------------------------------------

    --
    -- Estructura de tabla para la tabla `tbl_sample`
    --

    CREATE TABLE `tbl_sample` (
    `id` int(11) NOT NULL,
    `first_name` varchar(255) NOT NULL,
    `last_name` varchar(255) NOT NULL
    ) ENGINE=InnoDB DEFAULT CHARSET=latin1;

    --
    -- Volcado de datos para la tabla `tbl_sample`
    --

    INSERT INTO `tbl_sample` (`id`, `first_name`, `last_name`) VALUES
    (3, 'aa', 'aa'),
    (4, 'bb', 'bb');

    --
    -- Índices para tablas volcadas
    --

    --
    -- Indices de la tabla `tbl_sample`
    --
    ALTER TABLE `tbl_sample`
    ADD PRIMARY KEY (`id`);

    --
    -- AUTO_INCREMENT de las tablas volcadas
    --

    --
    -- AUTO_INCREMENT de la tabla `tbl_sample`
    --
    ALTER TABLE `tbl_sample`
    MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;
    /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
    /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
    /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

    ReplyDelete
    Replies
    1. ебать ты мутант, с херали на испанском пишешь? :)

      Delete
    2. Он крутой. Так всё просто объяснил и опубликовал.

      Delete
  2. once i click insert new contact botton it freezes , its not inserting data into db

    ReplyDelete
    Replies
    1. Then you need to do a malware porn scan because there's no reason for that. Code works perfectly

      Delete
  3. Thank you very much this is great!

    ReplyDelete
  4. function edit_data(uid, pc, s, name, idd, rmrk)
    {
    $.ajax({
    url:"edit.php",
    method:"POST",
    data:{uid:uid, pc:pc, s:s, name:name, idd:idd, rmrk:rmrk},
    dataType:"text",
    success:function(data){
    alert(data);
    }
    });
    }
    $(document).on('blur', '.pc_name', function(){
    var uid = $(this).data("id1");
    var pc_name = $(this).text();
    edit_data(uid, pc_name, "pc_name");
    });
    $(document).on('blur', '.s_n', function(){
    var uid = $(this).data("id2");
    var s_n = $(this).text();
    edit_data(uid, s_n, "s_n");
    });
    $(document).on('blur', '.uname', function(){
    var uid = $(this).data("id3");
    var uname = $(this).text();
    edit_data(uid,uname, "uname");
    });
    $(document).on('blur', '.id', function(){
    var uid = $(this).data("id4");
    var id = $(this).text();
    edit_data(uid,id, "id");
    });
    $(document).on('blur', '.remarque', function(){
    var uid = $(this).data("id5");
    var remarque = $(this).text();
    edit_data(uid,remarque, "remarque");
    });

    ce code ça marche pas, pourquoi ???

    ReplyDelete
    Replies
    1. Le même probème !

      tu as trouvé une solution ?

      Delete
    2. function edit_data(id, text, column_name)....
      data:{id:id, text:text, column_name:column_name}, ...

      this are the lines (change yours) .

      If you find a solution, please tell us. I have a similar problem with index.php / edit.php: UNDEFINED variable id...

      Delete
    3. All fine... I forgot a double quote in select.php

      Delete
    4. Working sample, with ADD, EDIT, DELETE, INSERT datas:

      http://www.valoryempresa.com/archives/Fixed-Header-Table-master-2.zip

      Delete
    5. What is the use of this code?.

      Delete
    6. it could be usefull for users with little knowlegment of CMS, or that older guy afraid to use computers, or in my case i'm making an aplicattion for incidents, and need to be fast

      Delete
    7. Javier de juan.
      Where is the double quot you mean ??
      I get same problem. Thanks

      Delete
    8. How to select box open inn this form value comes from database

      Delete
  5. Hola tengo un error que me tiene al borde. He hecho este ejemplo y funciona bien. Al hacerlo en otro proyecto me daun error:Error:Unknown column 'nombres' in 'field list'. He hecho de todo. No he cambiado nada y sigue igual. De hecho, hice un select * from donde el id = '"$id"' y guarde la consulta en un array y arroja cada valor. Gracias por tu ayuda y este es el cod:

    ReplyDelete
  6. Is there anyway to change the table border colors?

    ReplyDelete
    Replies
    1. REALLY?!?!???? EDIT THE CSS BOOTSTRAP!!!!

      Delete
    2. Jugalu did you start as an expert when you where still learning how to do web dev?

      Delete
  7. Thanks guys!

    Your concept helps me to complete my project. Thumbs up for your good work!

    ReplyDelete
  8. Thanks.This tutorial helped me a lot.

    ReplyDelete
  9. Great work. However edits/inserts only work in Firefox and Chrome. IE is not working.

    ReplyDelete
  10. Great tutorial, it works just fine.

    ReplyDelete
  11. so how can i import tools imported in head target so this can work locally

    ReplyDelete
  12. Hi, is it possible combine blur function and click function?

    ReplyDelete
  13. Hi, how can i edit data with 4 columns using your codes?

    ReplyDelete
  14. Hi ,excellent post. Please, advise how to handle situation on "insert" when not all dataType is text but if there were two types : text and date . Your reply would be greatly appreciated.

    ReplyDelete
  15. Hi ,excellent post. Please, advise how to handle situation on "insert" when not all dataType is text but if there were two types : text and date . Your reply would be greatly appreciated.

    ReplyDelete
  16. Hellow, how i can add page in select ?

    ReplyDelete
  17. after three row , new row dose not create , what will be the solution

    ReplyDelete
  18. after create three row , new row dose n0t generate , what will be the solution

    ReplyDelete
    Replies
    1. Why is it not doing it? What did you do prior to inserting the code because it works flawlessly out of the box. What have you edited since?

      Delete
  19. I have a problem after editing files. Im on Laravel framework and when i run project live, index file is showing only title and headline. Script is not showing, but it's working, because when i run project from directory, script is showing table and info is updating fine.

    ReplyDelete
  20. Hi friend can you enable videos in youtube of codeigniter and other all tutorial videos please

    ReplyDelete
    Replies
    1. You obviously hve been to the youtube page, can you not read what happened? enable? Seriously? His page was taken down for no reason by youtube!!!!

      Delete
  21. PERFECT, been looking for this for quite a while ! thanks a lot <3

    ReplyDelete
  22. delete function is not working in your example too

    ReplyDelete
  23. My delete function is not working rest all the things are right and working what can be the problem?

    ReplyDelete
  24. this code is not working, keep on display data updated, can't stop it

    ReplyDelete
  25. Hello, please answer, what is doing wrong?
    Afeter POST from DataBase there is "????" in Cyrillic names.
    What need to do?
    Thanks.

    ReplyDelete
  26. Hello, how do I do that when enter is updated automatically and not a blank?

    ReplyDelete
  27. Great Job Sir, thank you so much.

    ReplyDelete
  28. Great, just what I have been looking for a long time. One problem I am having is that my id in existing table is ID not id. It is not working like it was when I created test table with id all lowercase. I must be doing something wrong. Is there anyone else with a similar issue with the "id"? Please let me know if so. TYVM

    ReplyDelete
  29. Great! Just what I have been looking for awhile. The only problem is that after the test table trial with lowercase "id", I transferred to an existing table that has "ID" uppercase and poof, nothing works. I have to be doing something very wrong. If there is someone who has had a similar issue, I would like to know what you did to correct this. I know it has to be something very simple. Anyway, thank you very much!

    ReplyDelete
  30. Helo Dear
    Thanks for share the tutorial include source..
    I get problem when I edit data, event though data edited but the messege update displaying repeated for many time.

    this is the code on index.php
    function edit_data(id, text, column_name)
    {
    $.ajax({
    url:"edit.php",
    method:"POST",
    data:{id:id, text:text, column_name:column_name},
    dataType:"text",
    success:function(data){
    alert(data);
    }
    });
    }
    $(document).on('blur', '.component', function(){
    var id = $(this).data("id1");
    var uraian = $(this).text();
    edit_data(id, uraian, "uraian");
    });
    $(document).on('blur', '.qty', function(){
    var id = $(this).data("id2");
    var qty = $(this).text();
    edit_data(id, qty, "qty");
    });
    $(document).on('blur', '.cost', function(){
    var id = $(this).data("id3");
    var hrgqty = $(this).text();
    edit_data(id, hrgqty, "hrgqty");
    });
    $(document).on('blur', '.total', function(){
    var id = $(this).data("id4");
    var total = $(this).text();
    edit_data(id, total, "total");
    });

    and this code in edit.php


    I hope you can give me solution to solve.
    Thanks

    ReplyDelete
  31. If No data found than why not showing Add button

    ReplyDelete
  32. How to Add select box in new add option.......

    ReplyDelete
  33. How to add select box in this form and value come from database

    ReplyDelete
  34. How could I use this to display a single record in a vertical list
    eg
    Name: John
    email: john@gmail.com

    etc

    ReplyDelete
  35. how to upload image also in same row wise

    ReplyDelete
  36. i can't input the id inside the form. please help.

    ReplyDelete
  37. Hi,
    thx for this :-)

    i Tried it out by download and copy the files on my Ubuntu 16 tls with apache. I configure database connection. Do you have an Idea why it dosent work for me? Sorry im Compleatly new. Should i have to install ajax or Jquery on my ubuntu 16 tls`?

    ReplyDelete
  38. Hi,

    thx for you work. I want to try your lesson by download your files. I only copie it to my ubntu16 tls with apache. I only create the database connection. Do you has an idea why it dosent work for me? shoud i have install ajax and Jquery on my Ubuntu 16?
    Thank you
    Rob

    ReplyDelete
  39. Can you plz guide me to add more column to this project. For example- Date of Birth.

    ReplyDelete
  40. It is a good program and works perfectly. I have only one observation. When we update data, or add a record, we update the whole page. I mean whole the table is being repainted. It does not fall under the concept of Ajax. The Ajax only updates a part of the page. So, it does not fill the requirement of classical Ajax.
    Please correct me, if I am wrong.

    ReplyDelete
  41. That is so cool but how i add pagination on it?
    Thanks :)

    ReplyDelete
  42. very googd and simple script Thank you.
    haw we can use select tag, in place td tag

    ReplyDelete
  43. I think you need update this script to be responsive

    ReplyDelete
  44. Great tutorial, thank you very much.
    Can it add the "Search" function like: https://www.webslesson.info/2017/07/live-add-edit-delete-datatables-records-using-php-ajax.html

    ReplyDelete
  45. hi I got an error in inserting the record...I can't insert an URL...I hope you could help me with this.

    ReplyDelete
  46. please how can i prevent user from entering a number greater than 10 or 20 for a column

    ReplyDelete
  47. Great work
    But I encounter some issues on line 39 of select.php:

    "Parse error: syntax error, unexpected ''" class="btn btn-xs btn-dange' (T_ENCAPSED_AND_WHITESPACE) in C:\wamp64\www\TABLEDIT\select.php on line 39"

    ReplyDelete
  48. i have a problem in delete it says undifined ID

    ReplyDelete
  49. How to add pagination to the same code? Along with Search

    ReplyDelete
  50. I want to add a selection of options to the table how ??
    thank you for the tutorial

    ReplyDelete
  51. I want to add a selection of options to the table how ??
    thank you for the tutorial

    ReplyDelete
  52. can i seek for an assistance i as i add another row aside from first_name and last_name which is address but when i tried to edit that column i always got and error id undefined thanks in advance

    ReplyDelete
  53. very nice tutorial, however when updating the confirmation message keeps popping up annoyingly, you seems to be stuck in it, the only way to come out is to refresh the page.

    ReplyDelete