Question

我正在尝试为数据表实现日期范围和年龄范围过滤器。

我已成功实施年龄过滤器。这是小提琴：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和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

的第四列

数据表上的日期范围和年龄范围过滤器

2 个答案: