我正在使用可编辑的bootstrap datatables。我想做的是在编辑单元格时更新MySQL数据库:
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));
我很难找出我已经编辑了哪些单元。因此,例如,当我将" Joe"更改为" Alan"时,我需要的信息是id:1
和row:First name
。我想知道DataTables是否已经具有此信息的变量,例如updatedRow.data()
。
一个加法:
控制台给我的输出:
[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
所以我的想法是现在解析updatedRow.data()
以获取编辑单元格的ID
更改data: {new:updatedCell.data()},
而不是data: 'new='+ updatedCell.data(),
喜欢波纹管:
$.ajax({
url: "update.php",
type: "POST",
data: {new:updatedCell.data()},
contentType: false,
}).done(function (ex) {
//alert(updatedRow.data());
var final_data = updatedRow.data();
var split_data = final_data.split(",");
alert("Id : "+ split_data[0] + "Email : " + split_data[3]);
}).fail(function (ex) {
console.log('failed');
});