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.
Download Script 
Live DemoDatabase
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
);
(
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
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);
?>
$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.');
}
});
{
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.');
}
});
Nice Post!
ReplyDeletereally awesome
ReplyDelete#great
ReplyDeleteArielMacintosh(TM)
very nice toutrial
ReplyDeletei want from you to explain how to export mysql from php to excel in utf-8 format
great..great..great.100x.
ReplyDeleteso Amazing!!
ReplyDeleteVery nice, thx !!!
ReplyDeleteToo bad it doesn't sort the values. Two little arrows on top of each column would make it perfect...
ReplyDeleteGreat
ReplyDeletebut where Add ?!
also Edit need some alert message before Edit by mistak
but it is very good Ex
Srinivas really awesome, if you write add that would me more useful to every one.
ReplyDeleteYou are doing great job.
write Face Book Tutorials That is more crazy in market.
fantastic! big thanks!!!
ReplyDelete@Naveen
ReplyDeleteThank you :)
very good. THank you
ReplyDeletei like this tutorial, it will be more amazing if you add "add button" to insert record, and "sorting column"
ReplyDeletethank you srivinas...
It's a great tutorial, I lke it very much.
ReplyDeleteThanx this helpful article.
e.stopImmediatePropagation is not a function
ReplyDelete[Break On This Error] e.stopImmediatePropagation();
Given this error JS error.but nice scrits
i like all u'r script style....
ReplyDeleteI would be glad if you make money, and by name in the listing.
ReplyDeleteTahank you for this!.
great tutorial,
ReplyDeleteThanx this helpful article.
hey Srinivas !!
ReplyDeleteThanks 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.
how do you add a search feature?
ReplyDeleteI got this error messag:
ReplyDeleteNotice: Undefined variable: tabledata in C:\wamp\www\EditDeletePage\table_data.php on line 39
maybe anybody can help?
How to make all Pagination according to date, selectbox selection
ReplyDeletegreat tutorial, thank you.
ReplyDeleteHi.. First i would like to say thanks for you because of the amazing tutorial. Thanks for your PHP database configuration file. Great!!!!
ReplyDeletewhy 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
ReplyDeletethanks
@Ayechification Email subscribers can download scripts
ReplyDeletelike previous "anonymous" said
ReplyDeleteI got this error messag:
Notice: Undefined variable: tabledata in C:\wamp\www\EditDeletePage\table_data.php on line 39
maybe anybody can help?
I got this error messag:
ReplyDeleteNotice: 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
I'm trying to make this work with a php template generator. Can you help me?
ReplyDeleteIt won't modify my database, just shows the loading image.
What can be wrong?
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 ???
ReplyDeleteThanks
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. [email protected]
ReplyDeletewhat 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. [email protected]
ReplyDeleteplease help me how can i add one more column which must be drop down list and populate data from another table
ReplyDeleteThis 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!
ReplyDeletem 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
ReplyDeleteGood Job!!
ReplyDeleteI 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!
hey guys!!
ReplyDeleteIt's a very good script and how to add in table?
its work update,delete etc... and add?
thank you for reply ;)
Hi
ReplyDeleteThank you it is amazing
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
ReplyDeletehow if you made function to handle all process so it does not require a lot of files
ReplyDeletei will add search + add function to this! next week!
ReplyDeleteI will post the download link here then.!
Thank you , it is amazing script
ReplyDeleteBut I have a problem when I use Arabic language.
is there any solution for this problem ?
hey nice one ....
ReplyDeleteI registered for the email subscription, but now I have to wait 18 hours before it will see that and let me download it?
ReplyDeleteGreat script but no validation.What about editing md5 password ?
ReplyDeletegood ... ^_^
ReplyDeleteIs 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.
ReplyDeletestopImmediatePropagation
ReplyDeleteerror...
great!!
ReplyDeleteIt's nice post. this helped me lot. great stuff's dude!!!!!
ReplyDeletemy script is not working.
ReplyDeleteits says "No database connectivity"
please help..how can i work with my localhost
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
ReplyDeleteNice script,
ReplyDeleteBut 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
Insted of talking each value of all input box you can use a simple logic for reducing code .
ReplyDeleteThis 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(); ;
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.
ReplyDeleteHi does anyone know how to bring this structure in a codeigniter MVC structure?
ReplyDeleteI would like to use this code with my existing CI MVC files.
thanks for any suggestions,
matt
how to insert data in table through jquery
ReplyDeletekundan
how to insert data in table through jquery
ReplyDeletekundan
nice share~
ReplyDeletethanks very much!!
Thanks very much!
ReplyDeleteI've found this for a long time.
when can i down the script? please help~
ReplyDeleteThanks very much!
ReplyDeleteI've found this for a long time.
can some body help me.. upload it and give me the link.. i really need it.. T.T
ReplyDeleteHello 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.
ReplyDeletewill this update the DB table ?? inthis example say PRODUCTS >
ReplyDeleteGreat work!
ReplyDeleteI 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!
Awsome :D
ReplyDeletethere is no sorting. i want the table sorted as well
ReplyDeleteHello! Very good script!
ReplyDeleteWhy show error in this line? (EditDeletePage.js)
e.stopImmediatePropagation();
Please help me!
good
ReplyDeleteSolution to this error below
ReplyDeleteNotice: 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 :)
keep it up. really help me lot
ReplyDeletenot work.. no database connection. :( on (localhost)
ReplyDeleteAccess 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..
THIS IS COOOOOL!!! I will share this tutorial to my team. Its very cool.
ReplyDeleteHai Srinivas
ReplyDeleteYour post is too cool
I have an doubt how to validate the data during updation !...
thanks in advance :)
good work
ReplyDeleteHai Srinivas
ReplyDeletekeep it up. really help me lot
i have fallow all the rpcedures by the way
ReplyDeleteGreat work here, really amazing stuff.
ReplyDeleteI 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" ?
i want to download this script its good i need it
ReplyDeletePlease upgrade the example with latest versions of jQuery(1.9.1)
ReplyDeletenice....
ReplyDeleteSuper tutorial! Please help with downloading it.
ReplyDeleteI wanted to download from provided link, even after subscribing, it still keeps asking me to subscribe
Help with this please.
Thank you.
Goooood I like
ReplyDeleteHello, Once again your script is awesome and useful.
ReplyDeleteI used it Its not updating my mysql table, but if i use yours than its works.
Please help me to solve this.
Thanks
I was the need of hour for me.
ReplyDeleteThanks dude
Hello,
ReplyDeletevery good script, there is no tablesorter ?
Please help me to solve this.
Thanks
Nice tuts... I believe, you can certainly use the search feature someday like datatables..
ReplyDeleteThank you for this. I currently use it on my website.
ReplyDeleteNotice: Undefined variable: tabledata ..... on line 41
ReplyDeleteNeed Solution for this
One deleting row new row from next page should be inserted in current page.
ReplyDeleteSuppose 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.
please help me how can i add one more column which must be drop down list and populate data from another table
ReplyDeleteNice article
ReplyDeletei want to download this script its good i need it.
ReplyDeleteThanks
thanks sriniva so much.....if you declare varible first then no table data error....@santu
ReplyDeletethank you
ReplyDeleteThanks a lot ,nice pagination ;)
ReplyDelete