Create Bootstrap Editable Table with PHP & MySQL-My programming school

Live desk modifying is a really person pleasant function of net utility that permits users to edit values ​​by clicking on it.

Bootstrap is the preferred CSS framework that helps in creating responsive HTML tables. So if you might be utilizing the bootstrap framework and are fascinated about creating Bootstrap Editable Table then you might be in the precise place right here.

How to Create Bootstrap Editable Table with PHP & MySQL

In this tutorial you’ll discover ways to Create Bootstrap Editable Table with PHP & MySQL. We will use a bootable JavaScript plugin to edit the bootstrap desk with edit and delete buttons.


We are going to cowl this tutorial step with Live to Create Bootstrap Editable Table with modifying and take away performance utilizing jQuery, PHP and MySQL.

Create Bootstrap Editable Table

So now we are going to begin to implementing Bootstrap Editable Table with PHP and MySQL. Before we start, have a look on file construction for this examples.

  1. index.php
  2. editable.js
  3. motion.php

How to Create MySQL Database Table

As we are going to cowl this tutorial with jQuery, PHP and MySQL to create a Bootstrap Editable Table with dwell instance. So first we are going to create MySQL database desk builders to create editable tables to show information.

CREATE TABLE `builders` (
  `id` int(11) NOT NULL,
  `identify` varchar(255) NOT NULL,
  `abilities` varchar(255) NOT NULL,
  `tackle` varchar(255) NOT NULL,
  `gender` varchar(255) NOT NULL,
  `designation` varchar(255) NOT NULL,
  `age` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

We will insert few information into builders desk to show in Bootstrap editable desk.

INSERT INTO `builders` (`id`, `identify`, `abilities`, `tackle`, `gender`, `designation`, `age`) VALUES
(1, 'Smith', 'Java', 'Newyork', 'Male', 'Software Engineer', 34),
(2, 'David', 'PHP', 'London', 'Male', 'Web Developer', 28),
(3, 'Rhodes', 'jQuery', 'New Jersy', 'Male', 'Web Developer', 30),
(4, 'Jay', 'PHP', 'Delhi, India', 'Male', 'Web Developer', 30);

How to Create Bootstrap Table with Records

In index.php file, we are going to create Bootstrap HTML desk with information from MySQL database desk builders.

<?php
include_once("inc/db_connect.php");
$sqlQuery = "SELECT id, name, gender, age FROM developers LIMIT 5";
$resultSet = mysqli_query($conn, $sqlQuery) or die("database error:". mysqli_error($conn));
?>
<desk id="editableTable" class="table table-bordered">
	<thead>
		<tr>
			<th>Id</th>
			<th>Name</th>
			<th>Gender</th>
			<th>Age</th>													
		</tr>
	</thead>
	<tbody>
		<?php while( $developer = mysqli_fetch_assoc($resultSet) )  ?>
		   <tr id="<?php echo $developer ['id']; ?>">
		   <td><?php echo $developer ['id']; ?></td>
		   <td><?php echo $developer ['name']; ?></td>
		   <td><?php echo $developer ['gender']; ?></td>
		   <td><?php echo $developer ['age']; ?></td>  				   				   				  
		   </tr>
		<?php  ?>
	</tbody>
</desk>

How to Make Bootstrap Table Editable

In the editable.js file, we are going to name the setEditable () technique from the bootstable plugin utilizing the bootstrap desk ID to make the desk editable. We can even name the onEdit () technique to edit inline and save performance and motion to edit the function and delete the file.

$( doc ).prepared(function() {
  $('#editableTable').SetEditable({
	  columnsEd: "0,1,2,3,4,5,6",
	  onEdit: function(columnsEd) 
		var empId = columnsEd[0].childNodes[1].innerHTML;
        var empName = columnsEd[0].childNodes[3].innerHTML;
        var gender = columnsEd[0].childNodes[5].innerHTML;
        var age = columnsEd[0].childNodes[7].innerHTML;
        var abilities = columnsEd[0].childNodes[9].innerHTML;
		var tackle = columnsEd[0].childNodes[11].innerHTML;
		$.ajax(
			sort: 'POST',			
			url : "action.php",	
			dataType: "json",					
			knowledge: id:empId, identify:empName, gender:gender, age:age, abilities:abilities, tackle:tackle, motion:'edit',			
			success: function (response) 
				if(response.standing) 
										
			
		);
	  ,
	  onBeforeDelete: function(columnsEd) 
	  var empId = columnsEd[0].childNodes[1].innerHTML;
	  $.ajax(
			sort: 'POST',			
			url : "action.php",
			dataType: "json",					
			knowledge: id:empId, motion:'delete',			
			success: function (response) 
				if(response.standing) 
							
			
		);
	  ,
	});
});

How to Handle Edit and Delete Record

In motion.php, we are going to ajax request knowledge to deal with desk row edit save performance to save lots of desk row modifications to MySQL database desk. We can even deal with desk rows delete.

<?php
include_once("inc/db_connect.php");
if ($_POST['action'] == 'edit' && $_POST['id']) 	
	$updateField='';
	if(isset($_POST['name'])) 
		$updateField.= "name='".$_POST['name']."'";
	 else if(isset($_POST['gender'])) 
		$updateField.= "gender='".$_POST['gender']."'";
	 else if(isset($_POST['age'])) 
		$updateField.= "age='".$_POST['age']."'";
	
	if($updateField && $_POST['id']) 
		$sqlQuery = "UPDATE developers SET $updateField WHERE id='" . $_POST['id'] . "'";	
		mysqli_query($conn, $sqlQuery) or die("database error:". mysqli_error($conn));	
		$knowledge = array(
			"message"	=> "Record Updated",	
			"status" => 1
		);
		echo json_encode($knowledge);		
	

if ($_POST['action'] == 'delete' && $_POST['id']) 
	$sqlQuery = "DELETE FROM developers WHERE id='" . $_POST['id'] . "'";	
	mysqli_query($conn, $sqlQuery) or die("database error:". mysqli_error($conn));	
	$knowledge = array(
		"message"	=> "Record Deleted",	
		"status" => 1
	);
	echo json_encode($knowledge);	

?>

Download Complete Source Code

You can view the dwell demo from the Demo hyperlink and can obtain the script from the Download hyperlink beneath.
Download

Pramod Kumar Yadav is from Janakpur Dham, Nepal. He was born on December 23, 1994, and has one elder brother and two elder sisters. He completed his education at various schools and colleges in Nepal and completed a degree in Computer Science Engineering from MITS in Andhra Pradesh, India. Pramod has worked as the owner of RC Educational Foundation Pvt Ltd, a teacher, and an Educational Consultant, and is currently working as an Engineer and Digital Marketer.




Best PYthon Course

Get More trending Courses

Leave a Comment