Hola amigos, ojal y me puedan ayudar.
Resulta que estoy utilizando datatables para mostrar los datos de una tabla de mi BD, entonces tengo un calendario datepicker que se muestra en pantalla.
Cuando selecciono una fecha del calendario, la tabla datetable, debe de filtrar los registros con la fecha que se selecciono en el calendario, la cosa es que esto no pasa, selecciono una fecha y nadamas se ve como que quiere cargar pero no filtra los resultados.
Alguien me podria ayudar porfavor, estoy desesperado, dejo aqui el codigo.
Código PHP:
<script>
function fnFilterGlobal (){
$('#example').dataTable().fnFilter(
$("#global_filter").val(),null,
$("#global_regex")[0].checked,
$("#global_smart")[0].checked
);
}
function fnFilterColumn ( i )
{
$('#example').dataTable().fnFilter(
$("#col"+(i+1)+"_filter").val(),i,
$("#col"+(i+1)+"_regex")[0].checked,
$("#col"+(i+1)+"_smart")[0].checked
);
}
$(document).ready(function(){
$.datepicker.regional['es'] = {
closeText: 'Cerrar',
prevText: '<Ant',
nextText: 'Sig>',
currentText: 'Hoy',
monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
weekHeader: 'Sm',
dateFormat: 'yy-mm-dd',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''
} ;
$.datepicker.setDefaults($.datepicker.regional['es']);
var oTable = $('#example').dataTable( {
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "server_processing.php",
"fnServerParams": function (aoData, fnCallback) {
aoData.push( {"name": "datepicker_min2", "value": $('#datepickercalendario').val() } );
aoData.push( {"name": "datepicker_max2", "value": $('#datepickercalendario').val() } );
},
"aaSorting": [[ 0, "desc" ]],
"aoColumns": [
{ "bVisible": true },
{ "bVisible": true },
{ "bVisible": false }
],
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
// Bold the grade for all 'A' grade browsers
$('td:eq(3)', nRow).html("<a href='"pagina.php?id="+aData[0]"'>"+aData[4]+"</a>" );
$('td:eq(0)', nRow).html( "<a href='pagina.php?id="+aData[1]+"'>"+aData[1]+"</a>" );
return nRow;
},
"oLanguage": {
"sLengthMenu": "Mostrando _MENU_ eventos por página",
"sZeroRecords": "No se encontro Nada",
"sInfo": "Mostrando _START_ de _END_ de un total de _TOTAL_ eventos",
"sInfoEmpty": "Mostrando 0 de 0 de un total de 0 eventos",
"sInfoFiltered": "(filtrados de _MAX_ total de eventos)",
"sSearch": "Buscar",
"oPaginate": {
"sFirst": " Primera ",
"sLast": " Última ",
"sNext": " Siguiente ",
"sPrevious": " Anterior "
}
}
});
$( "#datepickercalendario" ).datepicker ( {
dateFormat: 'yy-mm-dd,
numberOfMonths: 1,
"onSelect": function(date) {
min = new Date(date).getTime();
max = new Date(date).getTime();
oTable.fnDraw();
}
})
.keyup( function () {
DateFilter = new Date(this.value).getTime();
DateFilter = new Date(this.value).getTime();
oTable.fnDraw();
});
$( "#datepicker_min" ).datepicker( {
} );
$( "#datepicker_max" ).datepicker( {
} );
} );
</script>