DataTables基于时间范围的筛选功能实现问询

我完全懂你要实现的效果——给DataTables里的时间范围列做一个FROM/TO双端筛选器，就像那种可以精准框定时间区间来过滤数据的控件对吧？下面是一个完整的、基于DataTables原生API的实现方案，不需要额外插件，完全匹配你的需求：

1. 先搭好HTML结构 #

首先在表格上方添加筛选控件，我这里用文本框（也可以换成下拉框提升用户体验），让用户输入HHMM格式的起始和结束时间：

<div class="time-filter-controls">
  <label>FROM:</label>
  <input type="text" id="filter-from" placeholder="HHMM" value="0600">
  
  <label>TO:</label>
  <input type="text" id="filter-to" placeholder="HHMM" value="1100">
  
  <button id="apply-filter">应用筛选</button>
</div>

<table id="time-table" class="display" style="width:100%">
  <thead>
    <tr>
      <th>时间范围</th>
      <!-- 这里可以加其他列 -->
    </tr>
  </thead>
  <tbody>
    <tr><td>0500-1300</td></tr>
    <tr><td>0500-1430</td></tr>
    <tr><td>0600-0915</td></tr>
    <tr><td>0600-1000</td></tr>
    <tr><td>0600-1100</td></tr>
    <tr><td>0600-1115</td></tr>
    <tr><td>0600-1130</td></tr>
    <tr><td>0600-1200</td></tr>
    <tr><td>0600-1215</td></tr>
    <tr><td>0600-1300</td></tr>
    <tr><td>0600-1315</td></tr>
  </tbody>
</table>

2. 初始化DataTables并实现自定义筛选逻辑 #

接下来写JavaScript代码，核心是注册DataTables的自定义筛选器，然后监听控件变化触发筛选：

$(document).ready(function() {
  // 初始化DataTables实例
  const table = $('#time-table').DataTable();
  
  // 注册自定义筛选函数
  $.fn.dataTable.ext.search.push(function(settings, rowData, rowIndex) {
    // 获取用户输入的时间，转成数字方便比较
    const inputFrom = parseInt($('#filter-from').val(), 10);
    const inputTo = parseInt($('#filter-to').val(), 10);
    
    // 如果用户没输入有效时间，默认显示全部数据
    if (isNaN(inputFrom) || isNaN(inputTo)) {
      return true;
    }
    
    // 拆分当前行的时间范围，转成数字
    const timeRange = rowData[0]; // 假设时间范围在表格的第1列（索引0）
    const [rowStart, rowEnd] = timeRange.split('-').map(val => parseInt(val, 10));
    
    // 核心筛选逻辑：匹配你给出的第一个例子
    // 只有当行内时间范围完全落在用户选择的区间内时，才显示
    return rowStart >= inputFrom && rowEnd <= inputTo;
    
    // 如果你需要的是「只要时间范围和选择区间有重叠就显示」（匹配第二个例子）
    // 把上面的return换成下面这行：
    // return rowStart <= inputTo && rowEnd >= inputFrom;
  });
  
  // 监听筛选控件的变化，触发表格重绘（即重新筛选）
  $('#filter-from, #filter-to').on('keyup', function() {
    table.draw();
  });
  $('#apply-filter').on('click', function() {
    table.draw();
  });
  
  // 可选：给输入框加格式验证，确保只能输入4位数字
  $('#filter-from, #filter-to').on('input', function() {
    this.value = this.value.replace(/[^0-9]/g, '').slice(0, 4);
  });
});

3. 逻辑说明 #

• 默认的筛选逻辑完全匹配你第一个例子：当选择FROM=0600、TO=1100时，只会显示0600-0915、0600-1000、0600-1100这3条数据。
• 如果你需要实现第二个例子（FROM=0500、TO=1400时显示全部），只需要把筛选逻辑换成注释里的那一行——这行逻辑判断的是「行内时间范围和用户选择的区间有重叠」，所以0500-1430虽然结束时间超过1400，但因为和0500-1400有重叠，也会被显示出来。
• 输入框的验证逻辑是可选的，用来避免用户输入非数字或者过长的内容，提升体验。

4. 优化体验的小技巧 #

如果不想让用户手动输入时间，可以把文本框换成下拉框，预先列出所有可能的时间选项，比如：

<label>FROM:</label>
<select id="filter-from">
  <option value="0500">0500</option>
  <option value="0600" selected>0600</option>
  <option value="0700">0700</option>
  <!-- 其他时间选项按需添加 -->
</select>

这样用户不用手动输入，也不会出错，体验更好。

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