2015-05-26 137 views
1

我有一個jQuery的數據表,它有日期filter.My代碼看起來像這樣在下面plunker鏈接提到mentioned.Pasting我的JS代碼DatePickersjQuery的數據表日期過濾器

$(function() { 
    var oTable=$('#datatable').DataTable({ 
    "oLanguage": { 
     "sSearch": "Filter Data" 
    }, 
    "iDisplayLength": -1, 
    "sPaginationType": "full_numbers", 

    }); 

    $('#datepicker_from').click(function() { 
    $("#datepicker_from").datepicker("show"); 
    }); 
    $('#datepicker_to').click(function() { 
    $("#datepicker_to").datepicker("show"); 
    }); 


    $("#datepicker_from").datepicker({ 
    "onSelect": function(date) { 
     minDateFilter = new Date(date).getTime(); 
     oTable.fnDraw(); 
    } 
    }).keyup(function() { 
    minDateFilter = new Date(this.value).getTime(); 
    oTable.fnDraw(); 
    }); 

    $("#datepicker_to").datepicker({ 
    "onSelect": function(date) { 
     maxDateFilter = new Date(date).getTime(); 
     oTable.fnDraw(); 
    } 
    }).keyup(function() { 
    maxDateFilter = new Date(this.value).getTime(); 
    oTable.fnDraw(); 
    }); 

}); 

// Date range filter 
minDateFilter = ""; 
maxDateFilter = ""; 

$.fn.dataTableExt.afnFiltering.push(
    function(oSettings, aData, iDataIndex) { 
    if (typeof aData._date == 'undefined') { 
     aData._date = new Date(aData[0]).getTime(); 
    } 

    if (minDateFilter && !isNaN(minDateFilter)) { 
     if (aData._date < minDateFilter) { 
     return false; 
     } 
    } 

    if (maxDateFilter && !isNaN(maxDateFilter)) { 
     if (aData._date > maxDateFilter) { 
     return false; 
     } 
    } 

    return true; 
    } 
); 
    http://plnkr.co/edit/yTAmQRJHN1zVdzYJBKop?p=preview 

起始和結束日期範圍過濾器似乎工作正常。但隨着這些 我可能有一個單選按鈕(即:本週和本月) 本週單選按鈕將應該給今天的日期和上週之間的結果,並與月同樣的情況單選按鈕。 我應該如何解決這個問題。? date_filter後

回答

1

添加單選按鈕:該過濾的數據表基礎上選擇

<p id="radio_date_filter"> 
    <input type="radio" name="filterTable" value="week" />This Week 
    <input type="radio" name="filterTable" value="month"/>This Month 
</p> 

寫腳本:

$("#radio_date_filter input:radio").click(function(){ 


    var currentDate = new Date(); 

    if($(this).val() == 'week'){ 

     var weekDate = new Date(); 
     var first = weekDate.getDate() - 7; 
     var firstDayofWeek = new Date(weekDate.setDate(first)); 
     minDateFilter = firstDayofWeek.getTime(); 


    }else{ 

     var monthDate = new Date(); 
     var firstDayOfMonth = new Date(monthDate.setMonth(monthDate.getMonth() - 1)); 
     minDateFilter = firstDayOfMonth.getTime(); 

    } 

    maxDateFilter = currentDate.getTime(); 
    oTable.fnDraw(); 
}); 

working plunker

+0

謝謝:)但是在plunker如果我選擇一週的複選框現在它顯示假設它是27-05-2015並且一週以上的記錄,但我想在21-27之間取記錄,並且與月份一樣。好意助攻 – ravicandy

+0

感謝它的工作:) – ravicandy

+0

@ravicandy:你的歡迎。 –