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

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