Estoy trabajando con datatables, tengo una tabla la cual la alimento con un archivo tipo JSON echo con php.
$('#consulta').DataTable({
"ajax" : {
"url" : "consulta_datatable_filtro.php",
"type": "POST"
}
});
El archivo consulta_datatable_filtro.php devuelve la consulta en formato JSON la cual es leída por la librería. hasta aquí todo bien la librería funciona correctamente con los datos que le paso pero yo necesito agregar un select para el que el usuario seleccione otro tipo de filtros que la librería no proporciona por default.
$('#consulta').DataTable({
})
.card{
margin-top:10px;
}
tbody tr td{
font-size: 14px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
<section class="section-container">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="card text-left">
<div class="card-header">
Consulta de registros de afluencia
</div>
<div class="card-body">
<form action="" id="form-filtro" class="d-flex align-self-center">
<select name="filter-month" id="filter-month" class="form-control-sm">
<option value="" selected>Filtrar por mes</option>
<option value="01">Enero</option>
<option value="02">Febrero</option>
<option value="03">Marzo</option>
<option value="04">Abril</option>
<option value="05">Mayo</option>
<option value="06">Junio</option>
<option value="07">Julio</option>
<option value="08">Agosto</option>
<option value="09">Septiembre</option>
<option value="10">Octubre</option>
<option value="12">Noviembre</option>
<option value="13">Diciembre</option>
</select>
<span class="btn btn-primary btn-sm" id="btn-filter">Filtrar</span>
</form>
<hr id="separator-filter">
<table class="table" id="consulta">
<thead class="thead-dark">
<tr>
<td>Nombre</td>
<td>fecha</td>
<td>Hora</td>
<td>Ciudad</td>
<td>Correo Electronico</td>
<td>Telefono</td>
<td>Vehiculo</td>
<td>Color</td>
<td>APV</td>
<td>Sucursal</td>
<td>Editar</td>
</tr>
</thead>
<tfoot>
<tr>
<td>Nombre</td>
<td>fecha</td>
<td>hora</td>
<td>Ciudad</td>
<td>Correo Electronico</td>
<td>Telefono</td>
<td>Vehiculo</td>
<td>Color</td>
<td>APV</td>
<td>Sucursal</td>
<td>Editar</td>
</tr>
</tfoot>
<tbody id="tbody-datos">
</tbody>
</table>
</div>
<div class="card-footer text-muted">
Mercadotecnia - afluencia
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
Cuando selecciono una opción del filtro la envio con ajax al archivo php el cual devuelve el JSON por lo que en teoría al volver a hacer una nueva instancia de la clase datatables y referenciar al archivo este debería devolver los datos aplicando el filtro, sin embargo no es así, utilizo lo siguiente para enviar los filtros por post al archivo php.
$('#btn-filter').click(function(){
var data = $('#filter-month').val()
$.ajax({
url: 'consulta_datatable_filtro.php',
type: 'POST',
data: data,
success: function(r){
destruirTabla();
$('#consulta').DataTable({
"ajax" : {
"url" : "consulta_datatable_filtro.php",
"type": "POST"
}
});
}
});
});
La función destruir tabla contiene $('#consulta').dataTable().fnDestroy(); lo cual es necesario para ejecutar una nueva instancia de datatable según la documentación, después de ejecutar la función destruir tabla y crear una nueva instancia debería devolver el nuevo JSON con la nueva información, pero el archivo que devuelve el JSON no contiene los filtros originalmente, la información aplicando los filtros solo existe durante la ejecución de la petición ajax por lo que al referenciar el archivo los filtros no existen, quisera saber como puedo solucionar este detalle o como pasarle la respuesta que me devuelve ajax.