jQuery Ajax Live Editable Table Records using PHP MySQLi

Today, We want to share with you jQuery Ajax Live Editable Table Records using PHP MySQLi.
In this post we will show you jquery inline edit table row, hear for Inline Editing using PHP MySQL and jQuery Ajax we will give you demo and example for implement.
In this post, we will learn about Add, Edit And Delete Records Using jQuery, Ajax, PHP And MySQL with an example.

jQuery Ajax Live Editable Table Records using PHP MySQLi

There are the Following The simple About jQuery Ajax Live Editable Table Records using PHP MySQLi Full Information With Example and source code.

Steps 1: Make MySQL Database Table

I shall make MySQL table students

CREATE TABLE `students` (
`id` int(11) NOT NULL,
`name` varchar(255) NOT NULL,
`skills` varchar(255) NOT NULL,
`student_address` varchar(255) NOT NULL,
`gender` varchar(255) NOT NULL,
`mainsubject` varchar(255) NOT NULL,
`age` int(11) NOT NULL,
`image` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Steps 2: Include libs

Include external libs like jQuery and Tabledit plugin

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="dist/jquery.tabledit.js"></script>
<script type="text/javascript" src="custom_table_edit.js"></script>

Steps 3: Make HTML Table

index.php

<table id="data_table" class="infinity table table-striped">
<thead>
<tr>
<th>Id</th>
<th>StudentName</th>
<th>Student Gender</th>
<th>Student Age</th>
<th>Main Subject</th>
<th>Student Address</th>
</tr>
</thead>
<tbody>
<?php
$live_stud_query = "SELECT id, name, gender, student_address, mainsubject, age FROM students LIMIT 10";
$resultset = mysqli_query($conn, $live_stud_query) or die("database error:". mysqli_error($conn));
while( $student = mysqli_fetch_assoc($resultset) ) {
?>
<tr id="<?php echo $student ['id']; ?>">
<td><?php echo $student ['id']; ?></td>
<td><?php echo $student ['name']; ?></td>
<td><?php echo $student ['gender']; ?></td>
<td><?php echo $student ['age']; ?></td>
<td><?php echo $student ['mainsubject']; ?></td>
<td><?php echo $student ['student_address']; ?></td>
</tr>
<?php } ?>
</tbody>
</table>

Step 4: Create HTML table Editable

Create HTML table Editable and Tabledit Plugin

$(document).ready(function(){
$('#data_table').Tabledit({
deleteButton: false,
editButton: false,
columns: {
identifier: [0, 'id'],
editable: [[1, 'name'], [2, 'gender'], [3, 'age'], [4, 'mainsubject'], [5, 'student_address']]
},
hideIdentifier: true,
url: 'live_edit.php'
});
});

Steps 5: Save Live HTML Table

live_edit.php

READ :  JavaScript Read XML File local Example

Last step in live_edit.php, I shall manage functionality to all the records update edit changes into simple query To Save Live HTML Table Edit into MySQL Database.

<?php
include_once("db_connect.php");
$frm_field = filter_frm_field_array(INPUT_POST);
if ($frm_field['action'] == 'edit') {
$student_update='';
if(isset($frm_field['name'])) {
$student_update.= "name='".$frm_field['name']."'";
} else if(isset($frm_field['gender'])) {
$student_update.= "gender='".$frm_field['gender']."'";
} else if(isset($frm_field['student_address'])) {
$student_update.= "student_address='".$frm_field['student_address']."'";
} else if(isset($frm_field['age'])) {
$student_update.= "age='".$frm_field['age']."'";
} else if(isset($frm_field['mainsubject'])) {
$student_update.= "mainsubject='".$frm_field['mainsubject']."'";
}
if($student_update && $frm_field['id']) {
$live_stud_query = "UPDATE students SET $student_update WHERE id='" . $frm_field['id'] . "'";
mysqli_query($conn, $live_stud_query) or die("database error:". mysqli_error($conn));
}
}
?>

jQuery 15 Powerful Tips and Tricks for Developers and Web Designer

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Create Live Editable Table with jQuery, PHP and MySQL.
I would like to have feedback on my Infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

READ :  AngularJS ng-init Directive Multiple Values Example

Add a Comment

Your email address will not be published. Required fields are marked *