2017-09-11 29 views
11

Tôi đang cố gắng triển khai bộ lọc Daterange và độ tuổi cho dữ liệu có thể đặt.Phạm vi ngày và bộ lọc Độ tuổi trên datatable

Tôi đã triển khai thành công bộ lọc độ tuổi. Đây là fiddle: http://jsfiddle.net/7y8n0wLj/26/

Đây là 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); 

Nhưng khi tôi đang cố gắng để thực hiện datarange và độ tuổi không có kết quả Đây là 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); 

Xin vui lòng giúp.

Trả lời

4

Tôi muốn áp dụng cả hai tiêu chí trong phần mở rộng tìm kiếm của bạn:

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

... với thiết lập các giá trị của dateRangeStartdateRangeEnd trước đó trong xử lý sự kiện chọn:

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

Cập nhật bản demo: http://jsfiddle.net/1rr3qpjx/2/

0

thay đổi

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

để

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

ngày của bạn là ở cột thứ tư của aData

Các vấn đề liên quan