使用 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.