Live Table Edit, Delete with Pagination using Jquery
Wall Script
Follow Me:
Monday, April 25, 2011

Live Table Edit, Delete with Pagination using Jquery

This post is a collaboration of my previous popular posts such as live table data edit, delete records with pagination using Jquery, Ajax and PHP. I had implemented this using Jquery .live() function and DOM event handler .stopImmediatePropagation(). This script helps you to instantly modify or update the table data.

Background Image Change on Refresh with Javascript

Download Script     Live Demo

Database
Sample database products table columns pid, name, category, price and discount.
CREATE TABLE products
(
pid INT PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(70),
category VARCHAR(100),
price INT,
discount INT
);

Previous Posts
Live Table Edit with Jquery and Ajax
Pagination with Jquery, PHP , Ajax and MySQL
Delete Records with Random Animation Effect using jQuery and Ajax

The tutorial contains a folder called EditDeletePage with PHP and Javascript files.
index.php
table_data.php
load_data.php
live_edit_table.php
delete_ajax.php
db.php
EditDeletePage.js

Modifications

table_edit.php
Contains table data loop. If you want to display new record for example forth record you have to follow below code standard.
<?php
$query_pag_data = "SELECT pid,name,category,price,discount from products LIMIT $start, $per_page";
$result_pag_data = mysql_query($query_pag_data) or die('MySql Error' . mysql_error());
$finaldata = "";
// Table Header
$tablehead="<tr><th>Product Name</th><th>Category</th><th>Price</th><th>Discount</th><th>Edit</th></tr>";
// Table Data Loop
while($row = mysql_fetch_array($result_pag_data))
{
$id=$row['pid'];
$name=htmlentities($row['name']);
$category=htmlentities($row['category']);
$price=htmlentities($row['price']);
$discount=htmlentities($row['discount']);

$tabledata.="<tr id='$id' class='edit_tr'>

<td class='edit_td' >
<span id='one_$id' class='text'>$name</span>
<input type='text' value='$name' class='editbox' id='one_input_$id' />
</td>


<td class='edit_td' >
<span id='two_$id' class='text'>$category</span>
<input type='text' value='$category' class='editbox' id='two_input_$id'/>
</td>


<td class='edit_td' >
<span id='three_$id' class='text'>$price $</span>
<input type='text' value='$price' class='editbox' id='three_input_$id'/>
</td>
// New record
<td class='edit_td' >
<span id='four_$id' class='text'>$discount $</span>
<input type='text' value='$discount' class='editbox' id='four_input_$id'/>
</td>


<td><a href='#' class='delete' id='$id'> X </a></td>


</tr>";
}
// Loop End
$finaldata = "<table width='100%'>". $tablehead . $tabledata . "</table>";

/* Total Count for Pagination */
$query_pag_num = "SELECT COUNT(*) AS count FROM products";
$result_pag_num = mysql_query($query_pag_num);
$row = mysql_fetch_array($result_pag_num);
$count = $row['count'];
$no_of_paginations = ceil($count / $per_page);
?>


EditDeletePage.js
Contains Javascript.
$(".edit_tr").live('click',function()
{
var ID=$(this).attr('id');

$("#one_"+ID).hide();
$("#two_"+ID).hide();
$("#three_"+ID).hide();
$("#four_"+ID).hide();//New record

$("#one_input_"+ID).show();
$("#two_input_"+ID).show();
$("#three_input_"+ID).show();
$("#four_input_"+ID).show();//New record
}).live('change',function(e)
{
var ID=$(this).attr('id');

var one_val=$("#one_input_"+ID).val();
var two_val=$("#two_input_"+ID).val();
var three_val=$("#three_input_"+ID).val();
var four_val=$("#four_input_"+ID).val();//New record

var dataString = 'id='+ ID +'&name='+one_val+'&category='+two_val+'&price='+
three_val+'&discount='+four_val;

if(one_val.length>0&& two_val.length>0 && three_val.length>0 && four_val.length>0)
{
$.ajax({
type: "POST",
url: "live_edit_ajax.php",
data: dataString,
cache: false,
success: function(e)
{
$("#one_"+ID).html(one_val);
$("#two_"+ID).html(two_val);
$("#three_"+ID).html(three_val);
$("#four_"+ID).html(four_val);//New record
e.stopImmediatePropagation();
}
});
}
else
{
alert('Enter something.');
}
});
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


97 comments:

  1. #great




    ArielMacintosh(TM)

    ReplyDelete
  2. very nice toutrial
    i want from you to explain how to export mysql from php to excel in utf-8 format

    ReplyDelete
  3. great..great..great.100x.

    ReplyDelete
  4. Very nice, thx !!!

    ReplyDelete
  5. Too bad it doesn't sort the values. Two little arrows on top of each column would make it perfect...

    ReplyDelete
  6. Great

    but where Add ?!

    also Edit need some alert message before Edit by mistak

    but it is very good Ex

    ReplyDelete
  7. Srinivas really awesome, if you write add that would me more useful to every one.
    You are doing great job.
    write Face Book Tutorials That is more crazy in market.

    ReplyDelete
  8. fantastic! big thanks!!!

    ReplyDelete
  9. very good. THank you

    ReplyDelete
  10. i like this tutorial, it will be more amazing if you add "add button" to insert record, and "sorting column"
    thank you srivinas...

    ReplyDelete
  11. It's a great tutorial, I lke it very much.
    Thanx this helpful article.

    ReplyDelete
  12. e.stopImmediatePropagation is not a function
    [Break On This Error] e.stopImmediatePropagation();

    Given this error JS error.but nice scrits

    ReplyDelete
  13. i like all u'r script style....

    ReplyDelete
  14. I would be glad if you make money, and by name in the listing.

    Tahank you for this!.

    ReplyDelete
  15. great tutorial,
    Thanx this helpful article.

    ReplyDelete
  16. hey Srinivas !!
    Thanks a lot for ur PHP tutorials. I am new in PHP iwant to be a good php programmer . please give me ur email id. i am going to email my queries in php.

    ReplyDelete
  17. how do you add a search feature?

    ReplyDelete
  18. I got this error messag:

    Notice: Undefined variable: tabledata in C:\wamp\www\EditDeletePage\table_data.php on line 39

    maybe anybody can help?

    ReplyDelete
  19. How to make all Pagination according to date, selectbox selection

    ReplyDelete
  20. great tutorial, thank you.

    ReplyDelete
  21. Hi.. First i would like to say thanks for you because of the amazing tutorial. Thanks for your PHP database configuration file. Great!!!!

    ReplyDelete
  22. why i can't download this script ? i'm a member in labs.9lesson and i can't subscribe the file to my e-mail please tel me the url of this script to download it
    thanks

    ReplyDelete
  23. @Ayechification Email subscribers can download scripts

    ReplyDelete
  24. like previous "anonymous" said

    I got this error messag:

    Notice: Undefined variable: tabledata in C:\wamp\www\EditDeletePage\table_data.php on line 39

    maybe anybody can help?

    ReplyDelete
  25. I got this error messag:

    Notice: Undefined variable: tabledata in C:\wamp\www\EditDeletePage\table_data.php on line 39
    --------------------------------------------------
    change the line 4 finaldata to tabledata
    work for me
    :D
    cordially

    ReplyDelete
  26. I'm trying to make this work with a php template generator. Can you help me?
    It won't modify my database, just shows the loading image.
    What can be wrong?

    ReplyDelete
  27. Thank for this good work. But, in table_data, I want to make request like "select * from products where category = $_GET["category"]". How to transmit the GET value in the request ???
    Thanks

    ReplyDelete
  28. You are the best Srinivas! If you get a chance, please make an add script too, so you can add a new row to the table. nadeemno1@yahoo.com

    ReplyDelete
  29. what is your paypal account email id? Chai panny mere tarif se!. I need add capabilities. Otherwise I am playing with http://www.mysqlajaxtableeditor.com and in the long run that is what I intent on using so if you could learn that also. nadeemno1@yahoo.com

    ReplyDelete
  30. please help me how can i add one more column which must be drop down list and populate data from another table

    ReplyDelete
  31. This script looks perfect for what I'm doing... I registered for the email subscription, but now I have to wait 18 hours before it will see that and let me download it?!?!? Arrg!

    ReplyDelete
  32. m unable to download the file as i have already subscribed for the email but it is still giving me the error can you please help me to download this file

    ReplyDelete
  33. Good Job!!

    I took several attempt to signup ur mail subscription. But still saying, i m not subscribed. But the signup process says, i already signedup!! Need to download immediatly.

    Plz Help, do sumthing!

    ReplyDelete
  34. hey guys!!

    It's a very good script and how to add in table?

    its work update,delete etc... and add?

    thank you for reply ;)

    ReplyDelete
  35. Hi

    Thank you it is amazing

    ReplyDelete
  36. I think it would be great if you adding search engine for any mysql record. Thanks. Sorry for my bad english. I'm from indonesia

    ReplyDelete
  37. how if you made function to handle all process so it does not require a lot of files

    ReplyDelete
  38. i will add search + add function to this! next week!
    I will post the download link here then.!

    ReplyDelete
  39. Thank you , it is amazing script

    But I have a problem when I use Arabic language.

    is there any solution for this problem ?

    ReplyDelete
  40. I registered for the email subscription, but now I have to wait 18 hours before it will see that and let me download it?

    ReplyDelete
  41. Great script but no validation.What about editing md5 password ?

    ReplyDelete
  42. Is there any way to refresh the whole page after clicking outside the input texts? I was trying "window.location.reload()" but it doesn't make it properly. Any help? Thanks.

    ReplyDelete
  43. stopImmediatePropagation
    error...

    ReplyDelete
  44. It's nice post. this helped me lot. great stuff's dude!!!!!

    ReplyDelete
  45. my script is not working.
    its says "No database connectivity"
    please help..how can i work with my localhost

    ReplyDelete
  46. How can i download the source, I have try but did not get from download source. i have subscribe this before download but no result found plz help. I need to know how it works

    ReplyDelete
  47. Nice script,
    But when in a database you have an ' in your texte, the input script showing only a part value.
    ex: if you have a record in your Product name database like :
    it's my book
    the input script showing only it

    I don't find the solution for this " problem" of quotes

    ReplyDelete
  48. Insted of talking each value of all input box you can use a simple logic for reducing code .
    This is is row(tr) id this function will find all the input values and will create a serialize data string for ajax request.

    var itemcode = $('#'+ID+' input[type=text]').serialize(); ;

    ReplyDelete
  49. How can I increase the number of rows per page? We changed per_page at 10, but after 6 lines introduced adds a new blank page. So I entered 16 times, for the first 10 shows page 1, page 2 for the next 6 rows and when I add the 7th row adds a new blank page. So in total we have 3 pages instead of two.

    ReplyDelete
  50. Hi does anyone know how to bring this structure in a codeigniter MVC structure?

    I would like to use this code with my existing CI MVC files.

    thanks for any suggestions,
    matt

    ReplyDelete
  51. how to insert data in table through jquery

    kundan

    ReplyDelete
  52. how to insert data in table through jquery


    kundan

    ReplyDelete
  53. Thanks very much!
    I've found this for a long time.

    ReplyDelete
  54. when can i down the script? please help~

    ReplyDelete
  55. Thanks very much!
    I've found this for a long time.

    ReplyDelete
  56. can some body help me.. upload it and give me the link.. i really need it.. T.T

    ReplyDelete
  57. Hello Sri nivash anna Thank you for ur great tutorial. I hav a rqst? can u provide tutorials on many row insertion in phpmysql using php when submit the form. Actually i want to do multiple row insertion on single submit and also i am fetching the data in grid view from to tables and i want to insert combined values in third table when i submit the form multiple row should be inserted in third table. i really need it.

    ReplyDelete
  58. will this update the DB table ?? inthis example say PRODUCTS >

    ReplyDelete
  59. Great work!
    I have three questions:
    First: Special characters (ä,ö,ü, etc.) - how would you implement a solution for this?
    Second: Does it also work with DropDown fields if they are working with an ID and not text?
    Third: Is there any possiblity to have an add function implemented in this?
    Thank you so much for your answer... and go on like that! Fantastic work you do!

    ReplyDelete
  60. there is no sorting. i want the table sorted as well

    ReplyDelete
  61. Hello! Very good script!
    Why show error in this line? (EditDeletePage.js)
    e.stopImmediatePropagation();
    Please help me!

    ReplyDelete
  62. Solution to this error below

    Notice: Undefined variable: tabledata in C:\wamp\www\EditDeletePage\table_data.php on line 39

    On line 4 of table_data.php there is this declaration :

    $finaldata = "";

    Just declare another one for $tabledata like this:

    $tabledata = "";

    thats your error gone , FINITO :)

    ReplyDelete
  63. keep it up. really help me lot

    ReplyDelete
  64. not work.. no database connection. :( on (localhost)

    Access denied for user 'ODBC'@'localhost'

    i has set db.php but why still not connected with mysql. load_data.php, table_data.php and index.php show blank page..

    please help..

    ReplyDelete
  65. THIS IS COOOOOL!!! I will share this tutorial to my team. Its very cool.

    ReplyDelete
  66. Hai Srinivas

    Your post is too cool

    I have an doubt how to validate the data during updation !...

    thanks in advance :)

    ReplyDelete
  67. Hai Srinivas
    keep it up. really help me lot

    ReplyDelete
  68. i have fallow all the rpcedures by the way

    ReplyDelete
  69. Great work here, really amazing stuff.

    I have a question though...

    I subscribed more than 18 hours ago and yet I still didn't receive my email id to download "LIVE TABLE EDIT, DELETE WITH PAGINATION USING JQUERY" ?

    ReplyDelete
  70. i want to download this script its good i need it

    ReplyDelete
  71. Please upgrade the example with latest versions of jQuery(1.9.1)

    ReplyDelete
  72. Super tutorial! Please help with downloading it.

    I wanted to download from provided link, even after subscribing, it still keeps asking me to subscribe

    Help with this please.

    Thank you.

    ReplyDelete
  73. Hello, Once again your script is awesome and useful.

    I used it Its not updating my mysql table, but if i use yours than its works.

    Please help me to solve this.

    Thanks

    ReplyDelete
  74. I was the need of hour for me.
    Thanks dude

    ReplyDelete
  75. Hello,
    very good script, there is no tablesorter ?

    Please help me to solve this.

    Thanks

    ReplyDelete
  76. Nice tuts... I believe, you can certainly use the search feature someday like datatables..

    ReplyDelete
  77. Thank you for this. I currently use it on my website.

    ReplyDelete
  78. Notice: Undefined variable: tabledata ..... on line 41

    Need Solution for this

    ReplyDelete
  79. One deleting row new row from next page should be inserted in current page.
    Suppose I am at first page and last item is "Apple" and first item of second page is "Titanic",
    if I am at first page and delete the last item i.e. "Apple", the first item of second page i.e. "Titanic" should inserted as last item of first page.

    ReplyDelete
  80. please help me how can i add one more column which must be drop down list and populate data from another table

    ReplyDelete
  81. i want to download this script its good i need it.
    Thanks

    ReplyDelete
  82. thanks sriniva so much.....if you declare varible first then no table data error....@santu

    ReplyDelete

Make in India