【问题标题】:Jquery DataTable Date FilterJquery DataTable 日期过滤器
【发布时间】:2015-05-26 17:12:15
【问题描述】:

我有一个 jquery 数据表,它有日期过滤器。我的代码看起来像下面提到的 plunker 链接中提到的那样。为 DatePickers 粘贴我的 JS 代码

$(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

从和到日期范围过滤器似乎工作正常。但随着这些 我可能有一个单选按钮(即:本周和本月) 本周单选按钮将在今天和上周之间给出结果,月份单选按钮也是如此。 我应该如何解决这个问题?

【问题讨论】:

    标签: jquery jquery-datatables date-range


    【解决方案1】:

    在 date_filter 之后添加单选按钮:

    <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

    【讨论】:

    • 谢谢 :) 但是在 plunker 如果我现在选择周复选框,它会显示假设它是 27-05-2015 及以上一周的记录,但我想获取 21 日至 27 日之间的记录与月份相同。请协助
    • 嗨 Bhavin 似乎有一个小问题,目前上述 plunker 中的日期格式是 mm-dd-yy 我希望日期格式为 dd-mm-yyyy 如果我添加了 dateFormat: 'dd -mm-yy' 搜索似乎不起作用 这里必须做什么 请帮忙?
    • @ravicandy :搜索正常。您的意思是过滤(按本月和本周)不起作用?
    • 如果我将数据表中的日期字段更改为 dd/MM/yyyy 则搜索失败,具体修改在哪里?
    猜你喜欢
    • 1970-01-01
    • 2013-12-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-11-10
    相关资源
    最近更新 更多