JQuery DataTables - Replace / Update a row with a jQuery object. Or fnUpdate
I can successfully add a row to the datatable using the following code:
work:
var serversTable = $('#datatable-table').dataTable().api();
var serverRowTemplate = Handlebars.compile($('#serverRowTemplate').html());
var $row = $(serverRowTemplate(data.results[r]));
serversTable.row.add($row).draw(false);
But when I try to update (replace) a string using a similar method, I have no luck. I've also tried using fnUpdate, but I can't figure out how to properly replace / update an existing row via a jQuery object. Here's some code that doesn't update the table:
does not work:
var serversTable = $('#datatable-table').dataTable().api();
var oldRow = $('#dashboardTemplateContainer tr[data-tag="'+ data.results[r].tag + '"]'); // select the row i'm looking for
var serverRowTemplate = Handlebars.compile($('#serverRowTemplate').html()); //compiles the handlebars template. i need this template as i have a lot of conditionals etc.
var $row = $(serverRowTemplate(data.results[r])); // turning the template into a jQuery object worked for the row.add() function in the above example.
serversTable.rows(oldRow).data($row).draw(false); // replace the old row with the new row. doesn't work.
Any suggestions?
source to share
The API method rows().data()
can only be used to retrieve data. Use row().data()
instead to set data for a string.
However, you won't be able to use the jQuery object for <TR>
node to update the row data. Probably the best option in this case would be to remove the line with row().remove()
and re-add if all you have is <TR>
node.
source to share
If you are using ajax in your handler and update event do the following:
- Get confirmation first
tr
before successful callback - Then in your answer add an object
AllColumnsData
and fill it with updated data.
function clickHandler(e) {
var tid = $(this).data("tid");
var currentTR = $(this).closest("tr");
$.ajax({
type: "GET",
url: "/api/data/get/?tid=" + tid,
success: function (data) {
dt1.row(currentTR).data(data.Data3);
}
});
}
source to share
$(document).ready(function () {
$('#add-new').on('click',function(){
var rData = [
test1,
test2,
'<a href="#" data-href="' + response.result[0].id + '" class="update">Update</a>',
'<a href="#" data-href="' + response.result[0].id + '" class="delete">Delete</a>'
];
$('#dataTable').DataTable().row.add(rData).draw(false);
});
$('#dataTable').on('click', '.update', function () {
var pageParamTable = $('#dataTable').DataTable();
var tableRow = pageParamTable.row($(this).parents('tr'));
var rData = [
test1,
test2,
'<a href="#" data-href="' + response.result[0].id + '" class="update">Update</a>',
'<a href="#" data-href="' + response.result[0].id + '" class="delete">Delete</a>'
];
pageParamTable
.row( tableRow )
.data(rData)
.draw();
});
$('#dataTable').on('click', '.delete', function () {
var pageParamTable = $('#dataTable').DataTable();
var tableRow = pageParamTable.row($(this).parents('tr'));
pageParamTable.row( tableRow ).remove().draw();
});
});
I think these codes will help you.
source to share