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

Question

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

我写的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();
  });
    });

但只有当我 select 在日期选择器中输入一个日期，然后单击数据表（对数据进行排序的那些）中的箭头，或者如果我多次按 Enter 时，它才会出现问题。

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

提前致谢！

Answer 1

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

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

Updated fiddle

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

Add datepicker to filter data in Datatable

javascript

jquery

datatables

datepicker

datatables-1.10