Zakres dat i filtr przedziału wiekowego na datatable

Question

Próbuję wdrożyć Daterange i filtr przedziału wiekowego dla datatable.

Pomyślnie zaimplementowałem filtr wieku. Oto skrzypce: http://jsfiddle.net/7y8n0wLj/26/

Oto 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); 

Ale gdy próbuję wdrożyć DATERANGE i przedział wiekowy bezskutecznie Oto skrzypce: 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); 

Proszę o pomoc.

Answer 1

bym zastosowanie zarówno w rozszerzeniu kryteriów wyszukiwania:

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

... z ustawieniem wartości dateRangeStart i dateRangeEnd wcześniej w kompletacji obsługi zdarzeń:

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

Aktualizowane demo: http://jsfiddle.net/1rr3qpjx/2/

Answer 2

zmiana

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

do

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

twoi terminy są w czwartej kolumnie aData