Data disappears after populating the data - datatables

Question

I have this DataTable:
<table class="table table-striped table-bordered table-advance table-hover" id="tabela_1">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
I want to fill the table with data, using AJAX call. I have the following AJAX code:
function SearchResult(){
$.ajax({
url: 'php/search.php,
type: 'get',
data: $("#form_search").serialize(),
dataType: 'json',
success: function (data) {
if (data.success) {
$("#tabela_1 > tbody").html("");
$.each(data, function (index, record) {
if ($.isNumeric(index)) {
var row = $("<tr />");
$("<td />").text(record.ID).appendTo(row);
$("<td />").text(record.name).appendTo(row);
row.appendTo('#tabela_1');
}
});
}
}
});
}
At this point I get the table filled (after calling the SearchResult() function).
But, when I press the table column to sort that column, all the data disappear. The same happens when I use the table search box.
I've tried to use the fnDraw() and fnUpdate() but with no effect.

Answer 1

It's not recommended to use <tr>/<td> nodes to add data to the table, use appropriate DataTables API methods instead, for example row.add().
JavaScript:
success: function (data) {
var table = $("#tabela_1").DataTable();
if (data.success){
table.clear();
$.each(data, function (index, record){
if ($.isNumeric(index)) {
table.row.add([record.ID, record.name]);
}
});
table.draw();
}
}
HTML:
<table class="table table-striped table-bordered table-advance table-hover" id="tabela_1">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
</table>