-1
I have a search done with Ajax via Jquery that returns a tablet with Datatable. But the Datatable elements are duplicated as I have searched (see print).
I tried using Destroy, but then it stops creating the table. My code is like this at the moment. Javascript:
$(".pesquisar").on("click", function () {
$("#pesquisar").submit(function (event) {
// Stop form from submitting normally
event.preventDefault();
// Get some values from elements on the page:
var $form = $(this);
var inputs = $('#pesquisar').serialize();
var url = $form.attr("action");
// Send the data using post
var posting = $.post(url, inputs);
// Put the results in a div
posting.done(function (data) {
destroiDataTable();
$("#resultado").append(data);
});
});
});
function destroiDataTable() {
$("#resultado").html("");
$(".datatable").destroy();
}
$('.datatable').DataTable({
destroy: true,
retrieve: true,
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
],
"oLanguage": {
buttons: {
"copy": "Copiar",
"print": "Imprimir"
},
"sLengthMenu": "Mostrar _MENU_ registros por página",
"sZeroRecords": "Nenhum registro encontrado",
"sInfo": "Mostrando de _START_ a _END_ no total de _TOTAL_ registro(s)",
"sInfoEmpty": "Mostrando 0 de 0 registros",
"sInfoFiltered": "(filtrado de _MAX_ registros)",
"sSearch": "Pesquisar: ",
"oPaginate": {
"sFirst": "Início",
"sPrevious": "Anterior",
"sNext": "Próximo",
"sLast": "Último"
}
}
});
My table that comes in PHP return is like this:
<table class="table table-striped table-bordered datatable" cellspacing="0" style="width:100%">
<thead>
<tr>
<th>Nº Chamado</th>
<th>Abertura</th>
<th>Usuário</th>
<th>Descrição</th>
<th>Assunto</th>
<th>Status</th>
<th>Opções</th>
</tr>
</thead>
<tbody>
<?php
echo
"<tr>
<td>{$chamados->cha_codigo[$i]}</td>
<td>{$chamados->cha_data_hora_abertura[$i]}</td>
<td>{$chamados->usu_nome[$i]}</td>
<td>{$chamados->cha_descricao[$i]}</td>
<td>{$chamados->cha_assunto[$i]}</td>
<td>{$chamados->cha_status[$i]}</td>
<td> - </td>
</tr>";
?>
</tbody>
<tfoot>
<tr>
<th>Nº Chamado</th>
<th>Abertura</th>
<th>Usuário</th>
<th>Descrição</th>
<th>Assunto</th>
<th>Status</th>
<th>Opções</th>
</tr>
</tfoot>
</table>
Someone knows how to leave me what’s going on and how I can fix it?
Substitute
$("#resultado").append(data);
for$("#resultado").html(data);
– Gabriel Heming
It keeps duplicating the same way. If I put the Stroy it just doesn’t appear anything.
– UPeralta Ulisses Peralta
is that the "date" of your consultation is no longer duplicated?
– ThiagoYou
Place a.log console to see if the Submit (or click) event is not being called twice, it may also be some problem with syncing methods as well.
– ThiagoYou
Uperalta, edit your question and put the solution as an answer, so more people can take advantage of this solution
– Clayton Tosatti
Solutions should be in the answer area, not as a question.
– Woss
Sorry guys, I’m new to Stackoverflow yet. I’ll put as answer.
– UPeralta Ulisses Peralta