Hola, efectivamente, lo que hace el server_processing es que cuando recibe las fechas hace el filtro, este es el codigo completo
Código PHP:
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<style>
</style>
<link rel="stylesheet" href="css/calendar-ipad/jquery-ui-1.10.3.custom.min.css">
<link rel="stylesheet" href="css/calendar-ipad/jquery-ui-1.10.3.custom.css">
<script src="js/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<!-- ptTimeSelect files below -->
<link rel="stylesheet" type="text/css" href="http://pttimeselect.sourceforge.net/src/jquery.ptTimeSelect.css" media="screen" />
<script type="text/javascript" language="JavaScript" src="http://pttimeselect.sourceforge.net/src/jquery.ptTimeSelect.js"></script>
<style>
div.dataTables_length {
float: left;
font-family: "Trebuchet MS", Arial;
background-color: #963;
margin-top:10px;
}
div.dataTables_filter {
float: right;
background-color: #963;
display:none;
}
div.dataTables_info {
float: left;
background-color: #963;
font-family: "Trebuchet MS", Arial;
font-size:12px;
margin-top:10px;
margin-bottom:5px;
}
div.dataTables_paginate {
float: right;
background-color: #963;
font-family: "Trebuchet MS", Arial;
font-size:12px;
margin-top:10px;
margin-bottom:5px;
}
div.dataTables_length,
div.dataTables_filter,
div.dataTables_paginate,
div.dataTables_info {
padding: 6px;
}
table.pretty {
clear: both;
}
/* Self clearing - */
div.dataTables_wrapper:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
html[xmlns] .dataTables_wrapper { display: block; }
* html .dataTables_wrapper { height: 1%; }
table.pretty {
width: 100%;
clear: both;
}
table.pretty td,
table.pretty th {
padding: 10px;
border: 1px solid #fff;
}
/* cabeceras */
table.pretty thead th {
text-align: center;
background: #747474;
color:#FFF;
}
/* Body cells */
table.pretty tbody th {
text-align: left;
background: #91c5d4;
}
table.pretty tbody td {
text-align: center;
background: #963;
}
table.pretty tbody tr.odd td {
background: #efefef;
}
/* Footer cells */
table.pretty tfoot th {
background: #747474;
text-align: center;
color:#FFF;
}
table.pretty tfoot td {
background: #d7e1c5;
text-align: center;
font-weight: bold;
}
div.dataTables_wrapper {
background-color: #963;
}
table.pretty thead th.sorting_asc {
background: #747474 url('images/sort_asc.png') no-repeat right center;
}
table.pretty thead th.sorting_desc {
background: #747474 url('images/sort_desc.png') no-repeat right center;
}
table.pretty thead th.sorting {
background: #747474 url('images/sort_both.png') no-repeat right center;
}
a.paginate_button,
a.paginate_active {
display: inline-block;
background-color: #efefef;
padding: 2px 6px;
margin-left: 2px;
cursor: pointer;
*cursor: hand;
}
a.paginate_active {
background-color: transparent;
border: 1px solid black;
}
a.paginate_button_disabled {
color: #3d6672;
}
.paging_full_numbers a:active {
outline: none
}
.paging_full_numbers a:hover {
text-decoration: none;
}
div.dataTables_paginate span>a {
width: 15px;
text-align: center;
}
div.dataTables_info {
padding: 9px 6px 6px 6px;
}
#ui-datepicker-div {
z-index: 9999999!important;
}
.ui-datepicker {
height: 225px ;
padding:0 0.2em 0.2em 0;
width: 350px;
}
</style>
<script type="text/javascript" src="js/jquery.dataTables.min2.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>
<!--script>$.noConflict();</script-->
<!--script src="js/vendor/bootstrap.min.js"></script-->
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src='//www.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'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": false },
{ "bVisible": true },
{ "bVisible": true },
{ "bVisible": true },
{ "bVisible": true },
{ "bVisible": true },
{ "bVisible": true },
{ "bVisible": true },
{ "bVisible": true },
{ "bVisible": false },
{ "bVisible": false }
],
"oLanguage": {
"sLengthMenu": "Mostrando _MENU_ eventos por página",
"sZeroRecords": "No se encontro Nada - Disculpe",
"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();
alert("Solamente aqui debe de hacer el filtro");
}
})
.keyup( function () {
DateFilter = new Date(this.value).getTime();
DateFilter = new Date(this.value).getTime();
oTable.fnDraw();
});
} );
</script>
</head>
<body>
<div class="container cont-formulario">
<!-- Example row of columns -->
<div class="row">
<div class="col-lg-5">
<div id="datepickercalendario"></div>
</div>
</div>
<p> </p>
<div class="row">
<div class="col-lg-12">
<div class="full_width">
<table cellpadding="0" cellspacing="0" border="0" class="pretty" id="example" >
<thead>
<tr>
<th>Id</th>
<th>Centros de trabajo</th>
<th>Categorías</th>
<th>Subcategorias</th>
<th>Título</th>
<th>Lugar</th>
<th>Fecha</th>
<th>Hora</th>
<th>Status</th>
<th>url1</th>
<th>url2</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5" class="dataTables_empty">Cargando desde el servidor...</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Id</th>
<th>Centros de trabajo</th>
<th>Categorías</th>
<th>Subcategorias</th>
<th>Título</th>
<th>Lugar</th>
<th>Fecha</th>
<th>Hora</th>
<th>Status</th>
<th>url1</th>
<th>url2</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
30/07/2014, 14:22
