使用 DataTables 添加日期范围过滤下拉菜单

Question

我正在尝试向 DataTables table 添加一个简单的下拉列表（“30 天”、“60 天”、“90 天”、“1 年”、"All dates"）将按日期列中的值过滤 table。

我查看了 this 答案并了解如何按输入到文本框中的最小和最大范围进行过滤，但无法弄清楚如何将其移植到一个不错的下拉过滤器中。

Answer 1

这应该可以满足您的要求，但需要一些配置：

$.fn.dataTableExt.afnFiltering.push(
  function(oSettings, aData, iDataIndex) {
    if (typeof $('#duration').val() !== "undefined") {
      var duration = $('#duration').val();
      var durationBits = duration.split(" ");
      var durationInt = ~~durationBits[0];
      var durationString = durationBits[1];
      var now = moment("2013/08/11", "YYYY/MM/DD");
      var targetDate = now.subtract(durationInt, durationString);
      var iDateCol = 4;
      var colDate = aData[iDateCol];
      if (duration === "All") {
        return true;
      } else {
        return moment(colDate, "YYYY/MM/DD").isSameOrAfter(targetDate);
      }
    } else {
      return true;
    }
  }
);

您还需要 momentjs to be available. I've got a contrived working example here。我们基本上取一个日期，用moment来测试列中的日期是否与现在的日期相同或之后，并进行了相关的减法。然后，当 select 值更改时，我们重绘 table。希望对您有所帮助。

使用 DataTables 添加日期范围过滤下拉菜单

Adding date range filtering drop down with DataTables

jquery

filtering

jquery-plugins

datatables

dropdown