5个回答
20
最近我遇到了类似的问题。我相信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（）. invalidate（）
var initialData = [new Data(), new Data()];
var table = $('#foo').Datatable({
data: initialData
});
initialData[0].bar = 5;
table.row(0).invalidate().draw();
如果你从外部数据源获取数据，那么这将更加有用。
- akosel
4
2跟进问题：您知道如何触发表格上现有的“createdRow”事件吗？ - filur
1createdRow在行创建时调用，仅此而已。可能有一种方法可以在datatables源代码中深入搜索以触发它，但我认为更好的方法是使用columnDefs。例如，请查看此处的示例：https://datatables.net/examples/advanced_init/column_render.html。您可以设置一个呈现函数，每次更新表格时都会调用它。 - akosel
谢谢您的建议。您能否给我展示一个
render被触发的例子吗？在我的测试中它从未被触发... - filur嗯，看起来我必须设置“目标”才能触发它。 - filur
3
$(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();
});
});
我们在项目中使用这段代码，你也可以使用它。
- Vahap Gencdal
2
我遇到了错误
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) - Moeez2
如果您使用Datatable方法为行设置了特定的id属性，则可以使用以下方式进行选择：
table.row('#row_'+ idRow).data(rowData).draw()
为了能够被after选择，id属性的生成必须像这样：
例如，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>
- Olivier Mongeot
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 有新变化，我尝试为您创建一个演示页面，它在本地工作正常，我添加了插入和更新的示例; 基本上，我尝试从 Datatable 页面理解解决方案：https://datatables.net/examples/api/add_row.html
- Vahap Gencdal
0
更新表中的行。
let updateRow = $("#tableId").DataTable().row(this)
tableRow.data([
'text1',
'text2',
'text3',
'text4',
])
在表格中添加行。
let updateRow = $("#tableId").DataTable()
tableRow.row
.add([
'text1',
'text2',
'text3',
'text4',
]).draw()
- Sunthon Studio
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
$(".dataTable").dataTable().row( index|selector ).draw()？ - iamawebgeek