I would like to know the correct way to update/redraw a table row using the new API. Old questions suggest table.fnUpdate. Should I still be using the old API for this?
The new API tells me nothing about updating rows.
Thanks in advance!
Update a row using DataTable()
56.8k views Asked by filur At
5
There are 5 answers
2
On
$(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();
});
});
We are using this code our projects you can use this.
0
On
<!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>
there are new changes in Datatable I tried to create a demo page for you it is working locally I added insert and update example; basically, I tried to understand the solution from Datatable page: https://datatables.net/examples/api/add_row.html
0
On
if you have set specific id attribute for your rows with Datatable method , then you can select with :
table.row('#row_'+ idRow).data(rowData).draw()
Because generation of id attributes must be like this to be selected by after :
Ex id 3:
// In php : push the key 'DT_RowId' foreach row
foreach ($items as $item) {
$item['DT_RowId'] = 'row_' . $id;
}
After you have specific id and you can select easily for an update :
<tr id="row_3" class="...">
....
</tr>
I had a similar issue recently. I believe row().data() is what you are looking for https://datatables.net/reference/api/row%28%29.data%28%29
For example:
Alternatively, you can use row().invalidate() https://datatables.net/reference/api/row%28%29.invalidate%28%29
This is more useful if you are deriving your data from an external data source.