I am trying to implement Daterange and age range filter for datatable.
I have successfully implement age filter. Here is fiddle: http://jsfiddle.net/7y8n0wLj/26/
Here is jquery
$.fn.dataTable.ext.search.push(function (settings, data, dataIndex) { if ($('#range').val().indexOf("+")>=0){ var number=$('#range').val().slice(0,-1); //alert(number); return parseInt(data[1]) > parseInt(number || data[1]); }else if ($('#range').val().indexOf("-")>=0){ var number=$('#range').val().split("-"); //alert(number[0]); //alert(number[1]); return parseInt(data[1]) >= parseInt(number[0] || data[1]) && parseInt(data[1]) <= parseInt(number[1] || data[1]); } }); $('#range').on('change',table.draw); But when i am trying to implement Daterange and age range to no avail Here is fiddle: http://jsfiddle.net/evcfespn/176/
$.fn.dataTableExt.afnFiltering.push( function( oSettings, aData, iDataIndex ) { var grab_daterange = $("#date_range").val(); var give_results_daterange = grab_daterange.split(" to "); var filterstart = give_results_daterange[0]; var filterend = give_results_daterange[1]; var iStartDateCol = 5; //using column 2 in this instance var iEndDateCol = 5; var tabledatestart = aData[iStartDateCol]; var tabledateend= aData[iEndDateCol]; if ( filterstart === "" && filterend === "" ) { return true; } else if ((moment(filterstart).isSame(tabledatestart) || moment(filterstart).isBefore(tabledatestart)) && filterend === "") { return true; } else if ((moment(filterstart).isSame(tabledatestart) || moment(filterstart).isAfter(tabledatestart)) && filterstart === "") { return true; } else if ((moment(filterstart).isSame(tabledatestart) || moment(filterstart).isBefore(tabledatestart)) && (moment(filterend).isSame(tabledateend) || moment(filterend).isAfter(tabledateend))) { return true; } return false; }); $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) { if ($('#range').val().indexOf("+")>=0){ var number=$('#range').val().slice(0,-1); //alert(number); return parseInt(data[3]) > parseInt(number || data[3]); }else if ($('#range').val().indexOf("-")>=0){ var number=$('#range').val().split("-"); //alert(number[0]); //alert(number[1]); return parseInt(data[3]) >= parseInt(number[0] || data[3]) && parseInt(data[3]) <= parseInt(number[1] || data[3]); } }); $('#range').on('change',table.draw); Please help.
2 Answers
Answers 1
I'd apply both criteria in your search extension:
$.fn.dataTable.ext.search.push(function(settings, data, dataIndex) { var fromAge, toAge, inEmpAgeRange, inEmpStartingDateRange; var empAge = parseInt(data[3]); var empStartDate = Date.parse(data[4]); if ($('#range').val().indexOf("+") >= 0) { fromAge = parseInt($('#range').val().slice(0, -1)); toAge = null; } else if ($('#range').val().indexOf("-") >= 0) { var ageRange = $('#range').val().split("-"); fromAge = parseInt(ageRange[0]); toAge = parseInt(ageRange[1]); } inEmpAgeRange = (empAge >= fromAge || empAge) && toAge !== null ? (empAge <= (toAge || empAge)) : true; inEmpStartingDateRange = (dateRangeStart && dateRangeEnd) ? (moment(empStartDate).isSameOrAfter(dateRangeStart) && moment(empStartDate).isSameOrBefore(dateRangeEnd)) : true; return inEmpAgeRange && inEmpStartingDateRange; }); ... with setting the values of dateRangeStart and dateRangeEnd earlier in the picker event handlers:
$("#date_range").on('apply.daterangepicker', function(ev, picker) { dateRangeStart = picker.startDate; dateRangeEnd = picker.endDate; $(this).val(dateRangeStart.format('YYYY-MM-DD') + ' to ' + dateRangeEnd.format('YYYY-MM-DD')); table.draw(); }); $("#date_range").on('cancel.daterangepicker', function(ev, picker) { dateRangeStart = dateRangeEnd = null; $(this).val(''); table.draw(); }); Updated demo: http://jsfiddle.net/1rr3qpjx/2/
Answers 2
change
var iStartDateCol = 5; //using column 2 in this instance var iEndDateCol = 5; to
var iStartDateCol = 4; //using column 2 in this instance var iEndDateCol = 4 your dates are in fourth column of aData
0 comments:
Post a Comment