If you want to replace an entire <tr>..</tr> with a brand new or modified <tr>, you can do the following.
First locate the row you want to replace in jQuery, either with some id selector or through DOM traversal from an event like this:
<!-- language: lang-js -->
var $row = $(this).closest("tr")
Let's say you have an brand new HTML row that you'd like to replace it with. This could come from an AJAX call, somewhere on the page, or a modified version of the existing row, or just straight HTML:
<!-- language: lang-js -->
var newRow = $("<tr> <td>1</td> <td>Bob</td> <td><i>23</i></td> <tr>
If this was a plain HTML table, you could just do .replaceWith() like this:
<!-- language: lang-js -->
<pre><code><del>$row.replaceWith($(newRow))</del>
</code></pre>
Buutttt, then DataTables doesn't know about it, so the next time you call $dt.draw(), it'll change back. Instead, you have to pass the new info into the DataTable by locating the row in DataTables and then handing it the new info.
row().data() - data represents an array of string values that are the innerHTML of each td
So we need to convert the above row to something like this:
<!-- language: lang-js -->
["1","Bob","<i>23</i>"]
Here's a function that converts a row to a data table array:
<!-- language: lang-js -->
function TrToData(row) {
return $(row).find('td').map(function(i,el) {
return el.innerHTML;
}).get();
}
So the whole thing will look something like this:
<!-- language: lang-js -->
$('.replace').click(function () {
var $row = $(this).closest("tr")
var newRow = $("#newRow").find("tr")[0].outerHTML
var newRowDataArray = TrToData(newRow)
$dt.row($row).data(newRowDataArray).draw();
});
Demon in Stack Snippets
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-js -->
$(function() {
// initialize table
var $dt = $('#example').DataTable({
paging: false,
bFilter: false,
bInfo: false
});
// add row
$('#addRow').click(function () {
//$dt.row.add( [1,2,3] ).draw();
var newRow = $("#newRow").find("tr")[0].outerHTML
$dt.row.add($(newRow)).draw();
});
// replace row
$('.replace').click(function () {
var $row = $(this).closest("tr")
var newRow = $("#newRow").find("tr")[0].outerHTML
var newRowDataArray = TrToData(newRow)
//$row.replaceWith($(newRow))
//data represents an array of string values that are the innerHTML of each td
$dt.row($row).data(newRowDataArray).draw();
});
function TrToData(row) {
return $(row).find('td').map(function(i,el) {
return el.innerHTML;
}).get();
}
});
<!-- language: lang-html -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/jquery.dataTables.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.js"></script>
<table id="example" class="display" cellspacing="0" >
<thead>
<tr>
<th>Hidden</th>
<th>Name</th>
<th>Age</th>
<th>Replace</th>
</tr>
</thead>
<tbody>
<tr>
<td>Line 1 <input type="hidden" value="1"/> </td>
<td>Bob <input type="hidden" value="Bob"/> </td>
<td><input type="text" value="18"/> </td>
<td><input type="button" value="Replace" class="replace"/> </td>
</tr>
</tbody>
</table>
<br/>
<button id="addRow">Add New Row</button>
<table id="newRow" style="display:none">
<tbody>
<tr >
<td>Line 2 <input type="hidden" value="2"/> </td>
<td>Ann <input type="hidden" value="Ann"/> </td>
<td><input type="text" value="21"/> </td>
<td><input type="button" value="Replace" class="replace"/> </td>
</tr>
</tbody>
</table>
<!-- end snippet -->
