Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Date range and Age range filter on datatable

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.

like image 837
Rahul Singh Avatar asked Sep 11 '17 12:09

Rahul Singh


People also ask

How do I filter date range in Datatables?

val(); var max = maxDate. val(); var date = new Date( data[4] ); if ( ( min === null && max === null ) || ( min === null && date <= max ) || ( min <= date && max === null ) || ( min <= date && date <= max ) ) { return true; } return false; } ); $(document).

What is FN DataTable ext search push?

fn. dataTable. ext.search . This is an array of functions (push your own onto it) which will will be run at table draw time to see if a particular row should be included or not. This example shows a search being performed on the age column in the data, based upon two inputs.


1 Answers

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/

like image 188
K Scandrett Avatar answered Sep 20 '22 03:09

K Scandrett