jquery 编辑后如何更新数据表行？
[英]jquery how to update datatable row after edit?
问题描述
当我在编辑模式中编辑某些datatable时，我正在尝试更新我的数据表。 下面是我的modal ， add row和btnSubmit function 以获取编辑的字段。
<div class="modal" id="myModal">
<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">Close</h4>
</div>
<div class="modal-body">
<p>
<label for="name">Name:</label>
<input type="text" id="name1" placeholder="Name">
</p>
<p>
<label for="name">E-mail#:</label>
<input type="email" class="input-sm" id="email1" placeholder="Email">
</p>
<p>
<label for="name">Contact#:</label>
<input type="text" class="input-sm" id="cno1" placeholder="Contact">
</p>
<p>
<label for="name">Date Of Birth:</label>
<input type="date" class="input-sm" id="dob1" placeholder="DOB">
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="btnsubmit" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
$('.add-row').on('click', function() {
name = $("#name").val();
email = $("#email").val();
cno = $("#cno").val();
bdy = $("#bday").val();
t.row.add([
name,
email,
cno,
bdy,
"<button class ='btn btn-danger del'>Delete</button>" + " " + "<button class='btn btn-warning upd'>Edit</button>"
]).draw(false);
$("#name").val('');
$("#email").val('');
$("#cno").val('');
$("#bday").val('');
});
$("#btnsubmit").click(function () {
var new_name = $("#name1").val();
var new_email = $("email1").val();
var new_cno = $("#cno1").val();
var new_dob = $("#dob1").val();
$("#myModal").modal("hide");
})
更新 1
我试图制作一个数组然后绘制它。
//save change button click evnet
$("#btnsubmit").click(function () {
var table = $('#example').DataTable();
var tableRow = $(this).parents('tr');
var new_name = $("#name1").val();
var new_email = $("email1").val();
var new_cno = $("#cno1").val();
var new_dob = $("#dob1").val();
var rData = [
new_name,
new_email,
new_cno,
new_dob,
];
table
.row(tableRow)
.data(rData)
.draw();
$("#myModal").modal("hide");
});
现在我收到错误
> datatable.js:430 Uncaught TypeError: Cannot set property '_aData' of undefined
at D.<anonymous> (datatable.js:430)
at D.data (datatable.js:371)
at HTMLButtonElement.<anonymous> (form1_datatable.html:194)
at HTMLButtonElement.dispatch (jquery.min.js:2)
at HTMLButtonElement.v.handle (jquery.min.js:2)
更新 2
因此，经过一些努力，我终于能够更新该行。 但现在我遇到了一个问题。 每当我尝试更新它时，它总是更新第一行。 下面是我保存按钮的代码
//save change button click evnet
$("#btnsubmit").on('click',function () {
var table = $('#example').DataTable();
var tableRow = $(this).closest('tr');
var new_name = $("#name1").val();
var new_email = $("#email1").val();
var new_cno = $("#cno1").val();
var new_dob = $("#dob1").val();
var rData = [
new_name,
new_email,
new_cno,
new_dob,
"<button class ='btn btn-danger del'>Delete</button>" + " " + "<button class='btn btn-warning upd'>Edit</button>"
];
console.log(tableRow);
table
.row()
.data(rData)
.draw();
$("#myModal").modal("hide");
});
更新 3
根据Vahap 的回答，我更新了我的代码
$('.add-row').on('click', function() {
id = 0;
name = $('#name').val();
email = $('#email').val();
cno = $('#cno').val();
bdy = $('#bday').val();
t.row.add([
name,
email,
cno,
bdy,
'<button class ="btn btn-danger del">Delete</button>' + '' + '<button class="btn btn-warning upd" data-id="'+$('#example').DataTable().rows().count()+'">Edit</button>'
]).draw(false);
$("#name").val('');
$("#email").val('');
$("#cno").val('');
$("#bday").val('');
});
//save change button click evnet
$("#btnsubmit").on('click',function (e) {
// Prevent event propagation
e.stopPropagation();
var new_name = $("#name1").val();
var new_email = $("#email1").val();
var new_cno = $("#cno1").val();
var new_dob = $("#dob1").val();
const id = $(this).attr("data-id");
console.log(id);
var temp = $('#example').DataTable().row(id).data();
temp[0] = new_name;
temp[1] = new_email;
temp[2] = new_cno;
temp[3] = new_dob;
$('#example').DataTable().row(id).data( temp ).draw(false);
$("#myModal").modal("hide");
});
但它仍然总是更新第一行。 我也得到了const id = $(this).attr("data-id"); console.log(id); undefined 。 const id = $(this).attr("data-id"); console.log(id);
我可以添加一个新行，删除它并打开一个模式来编辑它。 现在我想问的是如何将更新的值设置到我当前的datatable行中？ 任何帮助将不胜感激。
1 个解决方案
解决方案1
0 2021-03-03 08:28:24
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Datatable</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css">
</head>
<body>
<div>
<h1>Data</h1>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleDataModal" id="addDataButton">
Add Random Data to Table
</button>
<div style="padding:20px 5px;">
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
<td>
<button type="button" class="btn btn-primary update" data-id="0">
Update
</button>
</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
<td>
<button type="button" class="btn btn-primary update" data-id="1">
Update
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>
<script>
var counter = 1;
$( document ).ready(function() {
$('#addDataButton').on('click', function () {
$('#example').DataTable().row.add( [
'Juuso Temminen '+counter,
'FrontEnd Engineer '+counter,
'Riga ' +counter,
'371 ' +counter ,
'2021/3/3' +counter,
'$123,23',
'<button type="button" class="btn btn-primary update" data-id="'+$('#example').DataTable().rows().count()+'">Update</button>'
] ).draw( false );
counter++;
});
$('.table tr .update').click(function(){
const id = $(this).attr("data-id");
var temp = $('#example').DataTable().row(id).data();
temp[0] = 'Updated Datatable column '+ counter;
$('#example').DataTable().row(id).data( temp ).draw(false);
counter++;
});
});
</script>
</body>
</html>
Datatable 有新的变化我试图为你创建一个演示页面它在本地工作我添加了插入和更新示例； 基本上，我试图从数据表页面了解解决方案： https://datatables.net/examples/api/add_row.html
如何在服务器端处理jquery中编辑单元格并从dataTable中删除行
[英]How to edit a cell and delete a row from dataTable at serverside processing jquery
单击复选框时，禁用编辑行-Jquery，Jeditable，Datatable
[英]On click of checkbox ,disable row for edit -Jquery,Jeditable,Datatable
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.