带数据表的DateRangePicker – 组合两个搜索列

在我填充DaterangePicker和Datatable的漫长道路上,我现在想要使用两个daterangepicker输入组合两列搜索来过滤两个不同的列日期。

但是,当您只想在一列中搜索时,它可以工作,但是当您想要搜索两列时,行为是不稳定的。 例如,如果你想搜索上个月的创建日期和结束日期nex月…失败:(

看到我的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( '' ); } ); // 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(); } ); } ); } );