Question

我正在使用可编辑的bootstrap数据表。我想要做的是在编辑单元格时更新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

Answer 1

更改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');
});

如何使用bootstrap dataTables检测我编辑过的单元格？

1 个答案: