【问题标题】:date and time filtering not working for date of datatables日期和时间过滤不适用于数据表的日期
【发布时间】:2018-08-08 12:21:44
【问题描述】:

下面是我写的代码。在这里,我正在做的是基于从引导 datetimepickers 中选择的开始日期和结束日期,我正在过滤表行。但我不知道,这里没有发生搜索!!!...我在下面的代码中做错了什么

$(function() {

  var table = $('#example').DataTable();

  $('#datetimepicker1').datetimepicker({
    format: 'YYYY-MM-DD HH:mm:ss'
  });

  $('#datetimepicker2').datetimepicker({
    format: 'YYYY-MM-DD HH:mm:ss'
  });

  $.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
      var min = $('#mindate').val();
      var max = $('#maxdate').val();
      var startDate = new Date(data[1]);
      if (min == null && max == null) {
        return true;
      }
      if (min == null && startDate <= max) {
        return true;
      }
      if (max == null && startDate >= min) {
        return true;
      }
      if (startDate <= max && startDate >= min) {
        return true;
      }
      return false;
    }
  );


  $("#mindate").on({
    onSelect: function() {
      table.draw();
    },
  });
  $("#mindate").on({
    onSelect: function() {
      table.draw();
    },
  });

  $('#mindate, #mindate').change(function() {
    table.draw();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.2/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.2/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />

<div class="col-xs-6 selectpicker form-group">
  <label>From Date:</label>
  <div class='input-group date' id="datetimepicker1">
    <input type='text' class="form-control" id="mindate" />
    <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
    </span>
  </div>
</div>
<div class="col-xs-6 selectpicker form-group">
  <label>To Date:</label>
  <div class='input-group date' id="datetimepicker2">
    <input type='text' class="form-control" id="maxdate" />
    <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
    </span>
  </div>
</div>

<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th>From Date</th>
      <th>To Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2018-08-10 20:13:22</td>
      <td>2018-08-12 20:13:22</td>
    </tr>
    <tr>
      <td>2018-08-8 20:13:22</td>
      <td>2018-08-9 20:13:22</td>
    </tr>
    <tr>
      <td>2018-08-15 20:13:22</td>
      <td>2018-08-16 20:13:22</td>
    </tr>
    <tr>
      <td>2018-08-4 20:13:22</td>
      <td>2018-08-5 20:13:22</td>
    </tr>
  </tbody>
</table>

对于参考检查以下链接Filtering data programatically

代码$.fn.dataTable.ext.search.push()是过滤功能,不起作用,意味着搜索没有发生!!!

【问题讨论】:

  • “此代码不起作用”是什么意思?它做什么/不做什么?
  • @KIRANKUMAR 在您提出问题 2 分钟后说紧急(即使是变相)不会让帮助更快地发生。见meta.stackoverflow.com/q/326569。最好让你的问题更清楚。见绿巨人的评论。
  • 上面的 javascript 代码是错误的...我正在尝试使用 datetimepicker 过滤日期和时间...
  • 相应的链接可能对您有帮助datatables.net/examples/plug-ins/range_filtering.html
  • @KIRANKUMAR 我已经编辑了您的问题,请批准该编辑,所以 SO Guys 会知道您要做什么!!!

标签: javascript jquery twitter-bootstrap-3 datatables bootstrap-datetimepicker


【解决方案1】:

尝试使用dp.change 事件作为引导日期时间选择器。工作示例如下。在 datepicker 中更改后,单击 Datatable 的任何Column header。然后它将显示过滤后的数据。这可能是 Datatable 的问题,也可能是您/我编写的代码的问题。但过滤正在发生。

此外,如果在 fromto 日期选择器中未选择日期,则将 null 分配给 maxmin 变量

$(function() {

  var table = $('#example').DataTable();

  $('#datetimepicker1').datetimepicker({
    format: 'YYYY-MM-DD HH:mm:ss'
  });

  $('#datetimepicker2').datetimepicker({
    format: 'YYYY-MM-DD HH:mm:ss'
  });

  $('#datetimepicker1').on('dp.change', function() {
    table.draw();
  });

  $('#datetimepicker2').on('dp.change', function() {
    table.draw();
  });

  $.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
      var min = $('#mindate').val() ? new Date($('#mindate').val()) : null;
      var max = $('#maxdate').val() ? new Date($('#maxdate').val()) : null;
      var startDate = new Date(data[0]);
      var endDate = new Date(data[1]);
      if (min == null && max == null) {
        return true;
      }
      if (min == null && startDate <= max) {
        return true;
      }
      if (max == null && startDate >= min) {
        return true;
      }
      if (startDate <= max && startDate >= min) {
        return true;
      }
      return false;
    }
  );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.2/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.2/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />

<div class="col-xs-6 selectpicker form-group">
  <label>From Date:</label>
  <div class='input-group date' id="datetimepicker1">
    <input type='text' class="form-control" id="mindate" />
    <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
    </span>
  </div>
</div>
<div class="col-xs-6 selectpicker form-group">
  <label>To Date:</label>
  <div class='input-group date' id="datetimepicker2">
    <input type='text' class="form-control" id="maxdate" />
    <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
    </span>
  </div>
</div>

<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th>From Date</th>
      <th>To Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2018-08-10 20:13:22</td>
      <td>2018-08-12 20:13:22</td>
    </tr>
    <tr>
      <td>2018-08-08 20:13:22</td>
      <td>2018-08-09 20:13:22</td>
    </tr>
    <tr>
      <td>2018-08-15 20:13:22</td>
      <td>2018-08-16 20:13:22</td>
    </tr>
    <tr>
      <td>2018-08-04 20:13:22</td>
      <td>2018-08-05 20:13:22</td>
    </tr>
  </tbody>
</table>

更新:

我能够解决表格刷新问题。这与 Datatables 不完全一样,它带有引导程序 datetimepicker 本身。我已经从

更改了代码

$('#mindate').on('dp.change', function() { $('#datetimepicker1').on('dp.change', function() {

$('#maxdate').on('dp.change', function() { $('#datetimepicker2').on('dp.change', function() {

现在解决方案运行良好

【讨论】:

  • @KIRANKUMAR 很高兴听到这个消息。如果这个答案对你有帮助。请投票并批准。谢谢;-)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-05-28
  • 2018-06-17
  • 2014-03-31
  • 2014-02-03
  • 2018-05-03
  • 2014-05-24
相关资源
最近更新 更多