數據表上的日期范圍和年齡范圍過濾器

Question

我正在嘗試為數據表實現Daterange和age range filter。

我已經成功實現了年齡過濾器。 這是小提琴： http ： //jsfiddle.net/7y8n0wLj/26/

這是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);

但是，當我試圖實現Daterange和年齡范圍無濟於事這里是小提琴： 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);

請幫忙。

Answer 1

我會在您的搜索擴展程序中應用這兩個條件：

$.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;
});

...在dateRangeStart事件處理程序中設置dateRangeStart和dateRangeEnd的值：

$("#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();
});

更新的演示： http ： //jsfiddle.net/1rr3qpjx/2/

Answer 2

更改

var iStartDateCol = 5; //using column 2 in this instance
var iEndDateCol = 5;

至

var iStartDateCol = 4; //using column 2 in this instance
var iEndDateCol = 4

您的日期位於aData第四列