jQuery datatable inline editing with example

To enable editing in the datatable this is the easiest way

first, add this function to get editable data field, This will helps to toggle between editable and normal displaying in datatable

[code language="php"]
function editableValues($val,$id,$col,$tab,$data=""){
if(is_array($data)){
$str= "<div class='vedit' style='width: 100%;' title='double click to edit' id=".$id.">".$val."</div>";

$str.="<select style='display: none;' type='text' class='hedit' id='".$col."' name='".$tab."'>";
foreach ($data as $key => $value) {
$s="";
if($val==$value)
$s="selected";
$str.="<option value='".$key."' $s>".$value."</option>";
}
$str.="</select>";
return $str;
}else{
return "<div class='vedit' style='width: 100%;' title='double click to edit' id=".$id.">".$val."</div><input style='display: none;' type='text' class='hedit' value='".$val."' id='".$col."' name='".$tab."'>";
}
}
[/code]

Now in your ajax data, where you are sending data to the datatable, there you have to send data with above function

In above function 4 arguments are specified, they are for
1st argument ($val) :basic text to display in datatable
2nd argument ($col): the column name in the database table which you have to edit
3rd argument ($tab) :the table where the column exists
4th argument ($data)(optional) :If you want a select dropdown on edit,you have to send this data as key and value(ex:array("0"=>$container->containerid,"1"=>$container->containerid))

to enable editing in datatable some script is needed to edit fields, that is (This needs jQuery)

[code language="javascript"]
$( document). on('keyup',".hedit",function(e) {
if (e.keyCode == 13) {
var hedit=$(this);
update(hedit);
}else if(e.keyCode==27){
var hedit=$(this);
var vedit=hedit.prev();
vedit.toggle();
hedit.toggle();
}
});
$( document). on('change',".hedit",function(e) {
var hedit=$(this);
if($(hedit).is("select")){
update(hedit);
}
});
function update(hedit){
var tab=hedit.attr("name");
var col=hedit.attr("id");
var val=hedit.val();
var vedit=hedit.prev();
var id=vedit.attr("id");
$.ajax({
url:"{{url('admin/dashboard/updateEditable')}}",
method:"POST",
data:{"table":tab,"column":col,"value":val,"id":id},
success:function(data){
if($(hedit).is("select")) {
val = $(hedit).find('option:selected').text();
}
vedit.html(val);
vedit.toggle();
hedit.toggle();
},
error:function(){
alert("Failed to update");
vedit.toggle();
hedit.toggle();
}
});
}
$( document). on('dblclick',".vedit",function() {
$(".hedit").hide();
$(".vedit").show();
$(this).toggle();
var hedit=$(this).next();
hedit.toggle();
});
[/code]

In the above script update(hedit) is an ajax call to save the change in datatable
I think table_name,column_name and update value is enough to edit that record.

If you have any queries or comments on this feel free to comment below...

keep visiting... :)