添加日期选择器以过滤数据表中的数据

Question

我想添加一个日期选择器来过滤数据表中的数据。我看到了许多示例，其中日期选择器与日期范围一起使用，但是我希望数据表仅显示包含在日期选择器中选择的日期的数据。

我尝试在这里进行：https://jsfiddle.net/c9q5b0k3/3/

我编写的javascript代码是：

$(document).ready(function() {
  $('.datepicker').datepicker({
    format: "yyyy/mm/dd"
  });

});


$.fn.dataTable.ext.search.push(
  function(settings, data, dataIndex) {
    var dateSelected = $('#date').val();
    var date = data[4];
    if (dateSelected === "") {
      return true;
    }
    if (date === dateSelected) {
      return true;
    }
    return false;
  }
);

$(document).ready(function() {
  var table = $('#sspTable').DataTable({
    responsive: true
  });
  $('#date').keyup(function() {
    table.draw();
  });
    });

但是，只有当我在日期选择器中选择一个日期，然后单击数据表中的箭头（对数据进行排序的箭头），或者如果我按多次Enter键，它才起作用。

是什么问题？是否可以将日期选择器添加到数据表的搜索栏中？

提前感谢！

Answer 1

在日期选择器中选择一个值时，您需要调用table.draw()。为此，您可以修改现有的keyup事件处理程序，还必须包括change，如下所示：

$('#date').on('keyup change', function() {
  table.draw();
});

Updated fiddle