I am trying to implement Daterange and age range filter for datatable.

I have successfully implement age filter. Here is fiddle: /

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: /

$.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.

I am trying to implement Daterange and age range filter for datatable.

I have successfully implement age filter. Here is fiddle: http://jsfiddle/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/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.

• javascript
• jquery
• datatables

2 Answers 2

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/1rr3qpjx/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