【问题标题】:Add datepicker to filter data in Datatable添加日期选择器以过滤数据表中的数据
【发布时间】:2019-10-05 14:05:03
【问题描述】:

我想添加一个日期选择器来过滤数据表中的数据。 我看到了很多日期选择器与一系列日期一起使用的示例,但我希望数据表只显示包含在日期选择器中选择的日期的数据。

我在这里尝试过: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 时才有效。

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

提前致谢!

【问题讨论】:

    标签: javascript jquery datatables datepicker datatables-1.10


    【解决方案1】:

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

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

    Updated fiddle

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2021-04-13
      • 2012-04-04
      • 2013-04-17
      • 1970-01-01
      • 1970-01-01
      • 2016-10-10
      • 2023-03-17
      相关资源
      最近更新 更多