如何用jQuery实现DataTable日期范围筛选及清除功能

你现在的问题出在每次选择日期范围时，都往DataTables的search数组里追加新的筛选函数，而不是替换掉旧的——这会导致筛选条件叠加，而且没有办法清除掉之前的筛选规则。

修正思路 #

1. 用命名函数代替匿名函数做筛选，方便后续移除
2. 每次新增筛选前，先把旧的筛选函数从$.fn.dataTable.ext.search数组里删掉
3. 添加清除筛选的逻辑，把daterangepicker重置为初始状态，同时移除筛选函数并刷新表格

完整修正代码 #

// 初始化DataTable
let table = $('table[data-table-name="dt-asset-history"]').DataTable({
  columns: [
    {
      title: 'Date',
      data: 'EventDate',
      class: 'essential dt-nowrap',
      render: dataTableService.parseDateColumn,
      type: 'formatteddate'
    },
    {
      title: 'Events',
      data: 'EventData',
      class: 'essential'
    }
  ],
  order: [[0, 'desc']],
  autoWidth: false,
  dom: 't',
  processing: true,
  bDestroy: true,
  useFloater: false,
  paging: false,
  isResponsive: true
});

// 日期范围选择器初始化
let start = moment().subtract(29, 'days');
let end = moment();
// 定义全局的筛选函数，方便后续移除
let dateRangeFilter = null;

function cb(start, end) {
  $('#reportrange span').html(start.format('DD - MMMM - YYYY') + ' - ' + end.format('DD - MMMM - YYYY'));
}

cb(start, end);

$('#reportrange').daterangepicker({
  showDropdowns: true,
  ranges: {
    'Today': [moment(), moment()],
    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
    'This Month': [moment().startOf('month'), moment().endOf('month')],
    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
  },
  // 开启清除按钮
  showClear: true,
  autoUpdateInput: false
}, function(selectedStart, selectedEnd, label) {
  // 处理清除操作
  if (label === 'Clear') {
    $('#reportrange span').html('选择日期范围');
    // 移除旧的筛选函数
    if (dateRangeFilter) {
      let index = $.fn.dataTable.ext.search.indexOf(dateRangeFilter);
      if (index !== -1) {
        $.fn.dataTable.ext.search.splice(index, 1);
        dateRangeFilter = null;
      }
    }
    table.draw();
    return;
  }

  cb(selectedStart, selectedEnd);
  console.log('New date range selected: ' + selectedStart.format('DD - MMMM - YYYY') + ' to ' + selectedEnd.format('DD - MMMM - YYYY') + ' (predefined range: ' + label + ')');

  // 先移除旧的筛选函数，避免条件叠加
  if (dateRangeFilter) {
    let index = $.fn.dataTable.ext.search.indexOf(dateRangeFilter);
    if (index !== -1) {
      $.fn.dataTable.ext.search.splice(index, 1);
    }
  }

  // 创建新的筛选函数（统一用原生Date对象做比较）
  dateRangeFilter = function(settings, data, dataIndex) {
    let min = selectedStart.toDate();
    let max = selectedEnd.toDate();
    let date = new Date(data[0]);
    // 排除无效日期
    if (isNaN(date.getTime())) return false;

    return (min <= date && date <= max);
  };

  // 添加新筛选并刷新表格
  $.fn.dataTable.ext.search.push(dateRangeFilter);
  table.draw();
});

关键说明 #

• 命名函数管理：把筛选函数存到全局变量，每次新增前可以精准移除旧规则，不会出现筛选叠加的情况
• 清除逻辑：开启daterangepicker的showClear选项，用户点击清除时直接移除筛选函数并刷新表格，恢复全量数据显示
• 日期对象统一：将moment对象转为原生Date对象，避免不同日期库的比较差异
• 强制刷新：每次修改筛选后必须调用table.draw()，让DataTables重新渲染数据

内容的提问来源于stack exchange，提问作者Sufyan Taskin