I am working with editable bootstrap datatables. What I want to do is update the mySQL database when edited a cell:
index.php:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" />
</head>
<body>
<table id="myTable" class="stripe">
<thead>
<tr>
<th>id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Elliott</td>
<td>Beaty</td>
<td>elliott@example.com</td>
</tr>
<tr>
<th>2</th>
<td>Joe</td>
<td>Dirt</td>
<td>Joe@example.com</td>
</tr>
<tr>
<th>3</th>
<td>John</td>
<td>Doe</td>
<td>John@example.com</td>
</tr>
<tr>
<th>4</th>
<td>Jane</td>
<td>Doe</td>
<td>Jane@example.com</td>
</tr>
<tr>
<th>5</th>
<td>Billy</td>
<td>Bob</td>
<td>Billy@example.com</td>
</tr>
<tr>
<th>6</th>
<td>Bobby</td>
<td>Axlerod</td>
<td>Bobby@axecapital.com</td>
</tr>
</tbody>
</table>
</body>
</html>
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script src="http://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script src="https://raw.githubusercontent.com/ejbeaty/CellEdit/master/js/dataTables.cellEdit.js"></script>
<script src="basic.js"></script>
basic.js:
$(document).ready(function () {
var table = $('#myTable').DataTable();
table.MakeCellsEditable({
"onUpdate": myCallbackFunction
});
});
function myCallbackFunction(updatedCell, updatedRow, oldValue,row) {
console.log("The new value for the cell is: " + updatedCell.data());
console.log("The old value for that cell was: " + oldValue);
console.log("The values for each cell in that row are: " + updatedRow.data());
jQuery.ajax({
type: "POST",
url: "update.php",
data: 'new='+ updatedCell.data(),
cache: false
});
}
update.php:
require('database.php');
$new = @$_POST['new'];
$pdo = $db->prepare("UPDATE data SET new=? WHERE id=?");
$pdo->execute(array($update));
I have difficulties to find out what cell exactly I have edited. So when I change for example "Joe" to "Alan" I need the information that it is id:1 and row:First name. I was wondering if dataTables already have variables for this information like for example updatedRow.data().
One Addition:
the Console gives my the output:
[Log] The new value for the cell is: Alan
[Log] The old value for that cell was: Joe
[Log] The values for each cell in that row are: 2,Alan,Dirt,Joe@example.com
So my idea is now to parse updatedRow.data() to get the id of the edited cell
