使用 DataTable() 更新一行
[英]Update a row using DataTable()
4 个解决方案
解决方案1
18 已采纳 2015-06-08 13:13:14
我最近遇到了类似的问题。 我相信 row().data() 是你正在寻找的https://datatables.net/reference/api/row%28%29.data%28%29
例如：
table.row( 0 ).data( newData ).draw();
或者，您可以使用 row().invalidate()https://datatables.net/reference/api/row%28%29.invalidate%28%29
var initialData = [new Data(), new Data()];
var table = $('#foo').Datatable({
data: initialData
});
initialData[0].bar = 5;
table.row(0).invalidate().draw();
如果您从外部数据源派生数据，这会更有用。
解决方案2
3 2017-12-09 23:31:39
$(document).ready(function () {
$('#dataTable').on('click', '.update', function () {
var pageParamTable = $('#dataTable').DataTable();
var tableRow = pageParamTable.row($(this).parents('tr'));
var rData = [
yourdata1,
yourdata2,
'<a href="#" data-href="1" class="update">Update</a>',
'<a href="#" data-href="2" class="delete">Delete</a>'
];
pageParamTable
.row( tableRow )
.data(rData)
.draw();
});
});
我们正在使用此代码我们的项目您可以使用此代码。
解决方案3
1 2021-03-14 19:33:47
如果您使用 Datatable 方法为您的行设置了特定的 id 属性，那么您可以选择：
table.row('#row_'+ idRow).data(rowData).draw()
因为 id 属性的生成必须是这样才能被 after 选择：
前 ID 3：
// In php : push the key 'DT_RowId' foreach row
foreach ($items as $item) {
$item['DT_RowId'] = 'row_' . $id;
}
获得特定 ID 后，您可以轻松选择更新：
<tr id="row_3" class="...">
....
</tr>
解决方案4
0 2021-03-03 08:24:25
<!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>
数据表中有新的变化我试图为你创建一个演示页面它在本地工作我添加了插入和更新示例； 基本上，我试图从数据表页面了解解决方案： https : //datatables.net/examples/api/add_row.html
使用ID更新数据表上的行
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.