Estou criando uma tabela e preciso dar opção de ordenar a tabela pelo campo que preferir. Tentei utilizar o dataTable os dados são preenchidos corretamente na table mas quando clico em um cabeçalho para ordenar, filtrar, ou qualquer outra função do dataTable os dados da tabela somem e aparece a mensagem:
No data available in table
Meus códigos:
HTML
<div class="table-responsive">
<table id="tableTarefas" class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Nome</th>
<th>Grau</th>
<th>Data</th>
<th>Descrição</th>
<th>Tempo de execução</th>
<th>Informações adicionais</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
JS
$("#tableTarefas").dataTable();
$.ajax({
type: "get",
url: rootUrl + "tarefas/listAll" + updat,
dataType: "json",
success: function(data)
{
$("#tableTarefas").find("tbody tr").remove();
data.result.forEach(function(tarefa)
{
row= "<tr>"
+ "<td><a id='edit' href='#' data-id='" + tarefa.id_tar + "'>"+ tarefa.non_tar + "</a></td>"
+ "<td>"+ tarefa.gra_tar + "</td>"
+ "<td>" + tarefa.datf_tar + "</td>"
+ "<td>" + tarefa.des_tar + "</td>"
+ "<td>" + tarefa.tee_tar + "</td>"
+ "<td>" + tarefa.inf_tar + "</td>"
+ "</td></tr>";
$("#tableTarefas > tbody:last").append(row);
});
},
error: function(result)
{
$("#errorLoad").html(getErrorMessage(result.responseText));
$("#errorLoad").show();
$("#tableTarefas").find("tbody tr").remove();
}
});
Retorno do web service: (2 rows)
{
"result":[
{
"id_tar":"24",
"non_tar":"trtyr",
"gra_tar":"10",
"tee_tar":"00:00:00",
"dati_tar":"2015-11-14",
"datf_tar":"0000-00-00",
"datd_tar":"2015-11-15",
"des_tar":"",
"con_tar":"0",
"idu_tar":"1",
"idud_tar":null,
"inf_tar":"",
"pts_tar":"0"
},
{
"id_tar":"42",
"non_tar":"asdas",
"gra_tar":"1",
"tee_tar":"00:00:00",
"dati_tar":"2015-11-15",
"datf_tar":"0000-00-00",
"datd_tar":"2015-11-15",
"des_tar":"",
"con_tar":"0",
"idu_tar":"1",
"idud_tar":null,
"inf_tar":"",
"pts_tar":"0"
}
]
}
Alguém sabe como resolver este problema?