日期和时间过滤不适用于数据表的日期

时间：2018-08-08 12:21:45

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

下面是我编写的代码。在这里，我所做的是基于引导日期时间选择器的“从”和“至”日期选择，我正在过滤表行。但是我不知道，搜索没有在这里进行！！！ ...我在下面的代码中做错了什么

$(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()是过滤功能，它不起作用，意味着没有发生搜索！！

1 个答案:

答案 0 :(得分：0)

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

如果在null和max日期选择器中未选择日期，则将min分配给from和to变量

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

现在解决方案运行正常

相关问题
最新问题