I have a search done with Ajax via JQuery that returns a tablet with DataTable. But the DataTable elements are doubling as I want to search (see print).
I'vetriedtousedestroy,butthenitstopscreatingthetable.Mycodeislikethisrightnow.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 return PHP looks 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>
Does anyone know leave me what is happening and how can I resolve this?