答案 0 :(得分:10)
我最近遇到过类似的问题。我相信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();
如果您从外部数据源派生数据,这将更有用。
答案 1 :(得分:1)
$(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();
});
});
我们正在使用此代码,您可以使用此项目。
答案 2 :(得分:1)
如果您使用 Datatable 方法为行设置了特定的 id 属性, 然后你可以选择:
table.row('#row_'+ idRow).data(rowData).draw()
因为生成id属性必须是这样才能被after选择:
Ex 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>
答案 3 :(得分:0)
<!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