Main » 2012 » November » 6 » How to make a datagrid Table for Live Edit Content
9:59 PM
How to make a datagrid Table for Live Edit Content
In this demo we will make a data table showing in grid format and using
this example we can make a live table edit using Ajax and Jquery
how its work >> first click on any data column in showing grid .
that grid will be editable ,u can change the content and after change
press ENTER key to save your data into database permanently
First of all download our Jquery Library named Cloudevils.js from our external Cloud Storage System using Following link Download Cloudevils js pack
Extract following zip and paste the Cloudevils.js into ur project root directory
after that make a php file and paste the following code with some modifications
modify the td elements with these details
the class attribute of TD element have 3 class first is edit ( this will
be static ) and second is db_field_name ( this will be dynamic )
>> this will be the column name of database table just like
email_id .
and the third class is row_id ( this will be dynamic ) >> this will be the Row Id of a database table
$('td.edit').keydown(function(event){ arr = $(this).attr('class').split( " " ); if(event.which == 13) { $.ajax({ type: "POST", url:'save_data.php', //we have to make a save_data.php file to write db query data: "value="+$('.ajax input').val()+ "&rownum="+arr[2]+"&field="+arr[1], success: function(data){ $('.ajax').html($('.ajax input').val()); $('.ajax').removeClass('ajax'); }}); }
});
</script> </body> </html>
Now the last step to run a database sql statement for updation of the data changes in Grid data
make a file named save_data.php
and paste the following code into your file
<?php
$host_name="localhost";
$db_username="root"; // change according to your username
$db_password=""; // change accrdingly
$db_name="cloudevils"; // database name change as your db name
