I am working with one Datatable()
which is giving me problems when restarting it, I have already tried different methods and they have not worked.
The problem is that when I load it for the first time, the site loads DataTable()
without any problem.
DataTable
Major:
var dt = $('#traslados').DataTable({
"order": [[0, "desc"]],
'ajax': "<? echo base_url('Inicio/obtenerTraslados'); ?>",
bAutoWidth: false,
"lengthChange": false,
"searching": false,
"columns": [
{"data": "ides"},
{"data": "Status"},
{"data": "Folio"},
{"data": "Fecha"},
{"data": "Nombre"},
]
});
I am doing a kind of filter by means of a select
and a boton
:
<div class="form-group input-group m-b-2 m-t-0" id="selectstatus2">
<select id="filtro_estatus" class="form-control">
<option value="8">En Traslado</option>
<option value="20">Recibidos</option>
<option value="14">En Fila ML</option>
<option value="15">En Fila GDL</option>
<option value="17">En Fila CAC</option>
<option value="16">Enviado CAC</option>
<option value="9">Enviado GDL</option>
<option value="10">En Suc. Talavera</option>
<option value="12">En Suc. Telcel</option>
<option value="13">En Suc. Unefon</option>
<option value="11">En Suc. México</option>
</select> <span class="input-group-btn">
<button id="creafiltro" class="btn btn-default" type="button">Filtrar</button>
</span>
</div>
And when a then is done clic
, we proceed to destroy the one DataTable
and initialize the new one:
$('#creafiltro').click(function () {
dt.clear().destroy();
dt = $('#traslados').DataTable({
"order": [[0, "desc"]],
'ajax': "<?= base_url('Inicio/obtenerTrasladosf?folio=')?>" + $('#filtro_estatus').val(),
bAutoWidth: false,
serverSide: true,
"lengthChange": false,
"searching": false,
"columns": [
{"data": "ides"},
{"data": "Status"},
{"data": "Folio"},
{"data": "Fecha"},
{"data": "Nombre"},
],
});
});
If it deletes the DataTable()
existing one but it initializes the new one without loading the data and I don't know why.
I was doing tests through getJSON
to see that my data was being returned correctly and if it is returned without problem.
$.getJSON('<?php echo base_url('Inicio/obtenerTrasladosf?folio=')?>' + $('#filtro_estatus').val(),
function (data) {
console.log($data);
});
Example: I select value
8 from select
and press a Filtrar
and getJSON
it returns the following:
Dump => array(1) {
["data"] => array(3) {
[0] => array(7) {
["ides"] => string(2) "85"
["Folio"] => string(4) "1234"
["Fecha"] => string(19) "19-03-2019 10:18 AM"
["id"] => string(1) "8"
["Status"] => string(11) "En Traslado"
["Nombre"] => string(7) "Eduardo"
["Sucursal"] => string(14) "Mario Talavera"
}
[3] => array(7) {
["ides"] => string(2) "11"
["Folio"] => string(4) "1411"
["Fecha"] => string(19) "14-03-2019 06:10 PM"
["id"] => string(1) "8"
["Status"] => string(11) "En Traslado"
["Nombre"] => string(5) "Allan"
["Sucursal"] => string(14) "Mario Talavera"
}
[4] => array(7) {
["ides"] => string(2) "42"
["Folio"] => string(4) "1412"
["Fecha"] => string(19) "15-03-2019 06:32 PM"
["id"] => string(1) "8"
["Status"] => string(11) "En Traslado"
["Nombre"] => string(9) "Asistente"
["Sucursal"] => string(14) "Mario Talavera"
}
}
}
This because the array
return is $data['data']
:
$data['data'] = $this->Inicio_model->obtenerTrasladosf($id_sucursal, $_REQUEST['folio']);
echo json_encode($data);
But the same url
one he has , I getJSON
apply to ajax
him DataTable
and it doesn't work for me.
It is worth mentioning that I have already tried this:
if($.fn.DataTable.isDataTable('#traslados')) {
dt.clear().destroy();
}
and with this:
$('#teamTable').dataTable().fnDestroy();
$('#teamTable').dataTable();
And some others that I haven't been able to get them to work. The question is in the initialization of DataTable
why the data is being returned correctly.
Carrying out a more in-depth investigation, I finally found the solution and it is to add
bDestroy: true
toDataTable()
, destroy it with$("#traslados").dataTable().fnDestroy();
and initialize it withDataTable()
and not withdataTable()
:and the action when doing
clic
is as follows:Reference: https://stackoverflow.com/questions/24452270/how-to-reinitialize-datatable-in-ajax