我正在尝试创建一种在DataTable实现中编辑行的方法。我正在使用 AdminLTE BootStrap。
在此迭代中，我在每行的末尾都有一个按钮，用于启动模态。我希望按钮在模态中填充数据，并基本上用行数据填写表单，以便用户可以进行任何更改并再次发布。
我在下面的"工作"是因为它确实更新了表单，但是它只选择了我的 PHP 的 While 循环中的最后一项，这是有意义的。
如何使用单击"编辑"按钮的行中的正确数据更新表单？必须有一种方法可以在不中断循环的情况下发送特定数据，以仍然显示数据表。
表调用
<table id="buildTracker" class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Tracker ID</th>
<th>INI</th>
<th>Owner</th>
<th>Entered By</th>
<th>Record ID</th>
<th>Record Name</th>
<th>Items</th>
<th>Feature</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<?php
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo "<tr>";
echo "<td>".$row["ID"]."</td><td>".$row["INI"]."</td><td>".
$row["Owner"]."</td><td>".
$row["EnteredBy"]."</td><td>".
$row["RecordID"]."</td><td>".$row["RecordName"]."</td><td>".
$row["Items"]."</td><td>".$row["Feature"]."</td><td>";
echo '<button type="button" id="edit" onclick="update()" class="btn btn-default" data-toggle="modal" data-target="#modal-default">';
echo 'Edit';
echo '</button>'.'</td>';
echo "</tr>";
echo '<script>
function update() {
document.getElementById("enteredBy").value="'.$row["EnteredBy"].'";
document.getElementById("ini").value="'.$row["INI"].'";
document.getElementById("recordID").value="'.$row["RecordID"].'";
}
</script>';
}
} else {
echo "0 results";
}
$conn->close();
?>
。
模态和形式
<div class="modal fade" id="modal-default">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title">Default Modal</h4>
</div>
<div class="modal-body">
<form id="buildtrackerform" role="form" action="formSubmit.php" method="post">
<div class="box-body">
<div class="form-group">
<div class="row">
<div class="col-xs-5">
<label for=>Entered By</label>
<input type="text" class="form-control" name="enteredBy" id="enteredBy" placeholder="Entered By">
</div>
<div class="col-xs-2">
<label for="ini">INI</label>
<select onChange="setOwner(this)" style="text-transform: uppercase;" class="form-control select2" style="width: 100%;" name="ini" id="ini">
<option selected="selected" disabled="disabled">-Select-</option>
</select>
</div>
<div class="col-xs-5">
<label for="owner">Owner</label>
<input type="text" class="form-control" name="owner" id="owner" placeholder="Nemours Owner">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-xs-6">
<label for="recordID">Record ID</label>
<input type="text" class="form-control" name="recordID" id="recordID" placeholder="Record ID">
</div>
<div class="col-xs-6">
<label for="recordName">Record Name</label>
<input type="text" class="form-control" name="recordName" id="recordName" placeholder="Record Name">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-xs-12">
<label>Items</label>
<select multiple class="form-control select2" name="items[]" id="items[]" data-placeholder="  Type an item then press enter"
style="width: 100%;">
</select>
</div>
</div>
</div>
<!-- There are more fields - I removed them for the question -->
</div><!-- End Box Body -->
</div> <!-- End Modal Body -->
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
以防万一数据表脚本
<script>
$(function () {
$('#example1').DataTable()
$('#buildTracker').DataTable({
'paging' : true,
'lengthChange': true,
'searching' : true,
'ordering' : true,
'info' : true,
'autoWidth' : true
})
})
</script>
任何指导都值得赞赏。谢谢！
删除按钮的 onclick 属性，然后为其指定一个类。 让我们在这个例子中说 tableButton。然后修改你的 JavaScript：
$(function () {
$('#example1').DataTable()
var table = $('#buildTracker').DataTable({
'paging' : true,
'lengthChange': true,
'searching' : true,
'ordering' : true,
'info' : true,
'autoWidth' : true
});
$('.tableButton').click(function () {
var data = table.row( $(this).parents('tr') ).data();
// data now contains your row data, insert it where you like
})
})
编辑
给你几个指示。在原始代码中，您应该删除此位，因为您当前正在为数据库中的每一行重复输出它：
echo '<script>
function update() {
document.getElementById("enteredBy").value="'.$row["EnteredBy"].'";
document.getElementById("ini").value="'.$row["INI"].'";
document.getElementById("recordID").value="'.$row["RecordID"].'";
}
</script>';
我的原始代码片段不包含任何处理数据的内容，没有看到您的表格，我无法准确，但在$('.tableButton').click函数中，变量data将是一个数组，其中包含单击按钮的行上表格每列的值。如果你修改函数看起来像这样，你会得到这样的想法：
$('.tableButton').click(function () {
var data = table.row( $(this).parents('tr') ).data();
alert( 'First column is '+data[0]+' Second column is '+data[1] );
})
一旦你弄清楚了哪一列在哪里，你就把alert更改为一些代码，这些代码在窗体上的相关输入中插入值。
在这种情况下，我使用了多个数据标签。我认为它类似于 mikknik 的建议，但不使用 data() 函数。在按钮的创建中回显以下内容。
data-id="'.$row["ID"].'" data-enteredBy="'.$row["EnteredBy"].'"
然后把它扔到底部的 JS 中
<script>
$('#modal-default').on('show.bs.modal', function (e) {
var rowID = $(e.relatedTarget).attr('data-id');
$(this).find('#rowID').val(rowID);
var enteredBy = $(e.relatedTarget).attr('data-enteredBy');
$(this).find('#enteredBy').val(enteredBy);
//pass multiple data with data()
});
</script>