In my long way to plug DaterangePicker and Datatable, i wanted now to combine two columns search using two daterangepicker input to filtering two different column date.
However it works when you just want to search in one column, but when you want to search the two columns, the behavior is erratic. For example if you want to search creation date last month and end date nex month... failed :(
SEE MY JSFIDDLE
$(document).ready(function() {
//DATATABLE
//To display datatable without search and page length select, and to still have pagination work, instantiate like so
var oTable=$('#table_id').dataTable({
"sDom":"tp",
"pageLength": 10,
"pagination":true,
// Date Sorting
columnDefs: [
{ type: 'date-eu', targets: ([1,6])}
],
//// order table onload
"order": [[ 1, 'desc' ]],
});
//DATE RANGE
//set global vars that are set by daterange picker, to be used by datatable
var startdate;
var enddate;
//instantiate datepicker and choose your format of the dates
$('#reportrange').daterangepicker({
ranges: {
'All dates' : [moment().subtract(10, 'year'), moment().add(10, 'year')],
"Today": [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'7 last days': [moment().subtract(6, 'days'), moment()],
'30 last days': [moment().subtract(29, 'days'), moment()],
'This month': [moment().startOf('month'), moment().endOf('month')],
'Last month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}
,
"opens": "right",
format: 'DD/MM/YYYY'
},
function(start, end,label) {
// Parse it to a moment
var s = moment(start.toISOString());
var e = moment(end.toISOString());
startdate = s.format("YYYY-MM-DD");
enddate = e.format("YYYY-MM-DD");
});
//Filter the datatable on the datepicker apply event with reportage 1
$('#reportrange').on('apply.daterangepicker', function(ev, picker) {
startdate=picker.startDate.format('YYYY-MM-DD');
enddate=picker.endDate.format('YYYY-MM-DD');
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
if(startdate!=undefined){
// 1 here is the column where my dates are.
//Convert to YYYY-MM-DD format from DD/MM/YYYY
var coldate = aData[1].split("/");
var d = new Date(coldate[2], coldate[1]-1 , coldate[0]);
var date = moment(d.toISOString());
date = date.format("YYYY-MM-DD");
//Remove hyphens from dates
dateMin=startdate.replace(/-/g, "");
dateMax=enddate.replace(/-/g, "");
date=date.replace(/-/g, "");
//console.log(dateMin, dateMax, date);
// run through cases to filter results
if ( dateMin == "" && date <= dateMax){
return true;
}
else if ( dateMin =="" && date <= dateMax ){
return true;
}
else if ( dateMin <= date && "" == dateMax ){
return true;
}
else if ( dateMin <= date && date <= dateMax ){
return true;
}
// all failed
return false;
}
}
);
oTable.fnDraw();
});
$('#reportrange2').daterangepicker({
ranges: {
'All dates' : [moment().subtract(10, 'year'), moment().add(10, 'year')],
"Today": [moment(), moment()],
'Tomorrow': [moment().add(1, 'days'), moment().subtract(1, 'days')],
'7 next days': [moment().add(6, 'days'), moment()],
'Next 30 days': [moment().add(29, 'days'), moment()],
'This month': [moment().startOf('month'), moment().endOf('month')],
'Last month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
'Next month': [moment().add(1, 'month').startOf('month'), moment().add(1, 'month').endOf('month')],
'Next year': [moment().add(1, 'year').startOf('year'), moment().add(1, 'year').endOf('year')]
}
,
"opens": "right",
format: 'DD/MM/YYYY'
},
function(start, end,label) {
// Parse it to a moment
var s = moment(start.toISOString());
var e = moment(end.toISOString());
startdate = s.format("YYYY-MM-DD");
enddate = e.format("YYYY-MM-DD");
});
//Filter the datatable on the datepicker apply event with reportage 1
$('#reportrange2').on('apply.daterangepicker', function(ev, picker) {
startdate=picker.startDate.format('YYYY-MM-DD');
enddate=picker.endDate.format('YYYY-MM-DD');
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
if(startdate!=undefined){
// 1 here is the column where my dates are.
//Convert to YYYY-MM-DD format from DD/MM/YYYY
var coldate = aData[6].split("/");
var d = new Date(coldate[2], coldate[1]-1 , coldate[0]);
var date = moment(d.toISOString());
date = date.format("YYYY-MM-DD");
//Remove hyphens from dates
dateMin=startdate.replace(/-/g, "");
dateMax=enddate.replace(/-/g, "");
date=date.replace(/-/g, "");
//console.log(dateMin, dateMax, date);
// run through cases to filter results
if ( dateMin == "" && date <= dateMax){
return true;
}
else if ( dateMin =="" && date <= dateMax ){
return true;
}
else if ( dateMin <= date && "" == dateMax ){
return true;
}
else if ( dateMin <= date && date <= dateMax ){
return true;
}
// all failed
return false;
}
}
);
oTable.fnDraw();
});
// Setup - add a text input to Consultant/Client/candidate Header cell
$('#table_id .filters .FilterinputSearch').each( function () {
var title = $('#table_id thead .FilterinputSearch').eq( $(this).index() ).text();
$(this).html( '<input type="text" placeholder="recherche '+title+'" />' );
} );
// DataTable
var table = $('#table_id').DataTable();
// Apply the search
table.columns([3,4,5]).eq( 0 ).each( function ( colIdx ) {
$( 'input', $('.filters th')[colIdx] ).on( 'keyup change', function () {
table
.column( colIdx )
.search( this.value )
.draw();
} );
} );
} );