使用AdminLTE模板，添加daterangepicker后如何过滤DataTables？

嘿，我来帮你搞定这个daterangepicker和DataTables联动过滤的问题！结合AdminLTE的环境，其实步骤很清晰，我一步步给你拆解：

1. 确保依赖文件都已正确引入 #

首先要确认页面加载了所有必需的依赖（AdminLTE通常自带jQuery，但daterangepicker和DataTables可能需要补充）：

• jQuery（AdminLTE集成，无需额外引入）
• Moment.js（daterangepicker依赖它处理日期解析）
• daterangepicker的CSS和JS文件
• DataTables的CSS和JS文件（可用AdminLTE集成版本或官方最新版）

2. 完善HTML布局（适配AdminLTE风格） #

把日期选择器放在box-header的工具区里，贴合AdminLTE的UI规范，补全你的代码片段：

<section class="content">
  <div class="row">
    <div class="col-xs-12">
      <div class="box">
        <div class="box-header">
          <h3 class="box-title">Access Log View</h3>
          <!-- 新增日期范围筛选栏，适配AdminLTE布局 -->
          <div class="box-tools pull-right">
            <div class="input-group input-group-sm" style="width: 250px;">
              <input type="text" id="daterange" class="form-control pull-right" placeholder="选择日期范围">
            </div>
          </div>
        </div>
        <!-- /.box-header -->
        <div class="box-body">
          <!-- DataTables表格容器 -->
          <table id="accessLogTable" class="table table-bordered table-striped">
            <thead>
              <tr>
                <th>ID</th>
                <th>访问时间</th> <!-- 需过滤的日期列 -->
                <th>用户</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <!-- 表格数据 -->
            </tbody>
          </table>
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /.box -->
    </div>
    <!-- /.col -->
  </div>
  <!-- /.row -->
</section>

3. 初始化组件并实现联动过滤 #

在DOM加载完成后，初始化daterangepicker和DataTables，并通过DataTables的自定义搜索API实现过滤：

$(function() {
  // 1. 初始化daterangepicker
  $('#daterange').daterangepicker({
    autoUpdateInput: false,
    locale: {
      cancelLabel: '清空',
      applyLabel: '确定',
      format: 'YYYY-MM-DD HH:mm:ss' // 必须与表格日期列格式完全一致
    },
    startDate: moment().subtract(7, 'days'), // 默认显示最近7天
    endDate: moment()
  }, function(start, end, label) {
    // 选择日期后更新输入框并触发表格过滤
    $('#daterange').val(start.format('YYYY-MM-DD HH:mm:ss') + ' - ' + end.format('YYYY-MM-DD HH:mm:ss'));
    $('#accessLogTable').DataTable().draw();
  });

  // 清空日期范围的处理逻辑
  $('#daterange').on('cancel.daterangepicker', function(ev, picker) {
    $(this).val('');
    $('#accessLogTable').DataTable().draw();
  });

  // 2. 初始化DataTables
  var table = $('#accessLogTable').DataTable({
    "paging": true,
    "lengthChange": false,
    "searching": true,
    "ordering": true,
    "info": true,
    "autoWidth": false
    // 可添加其他配置项如ajax数据源
  });

  // 3. 添加DataTables自定义日期过滤规则
  $.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
      var dateRange = $('#daterange').val();
      if (!dateRange) return true; // 未选择日期时显示全部数据

      // 解析选择的起止日期
      var startDate = moment(dateRange.split(' - ')[0], 'YYYY-MM-DD HH:mm:ss');
      var endDate = moment(dateRange.split(' - ')[1], 'YYYY-MM-DD HH:mm:ss');
      // 获取当前行的日期（此处假设日期列为第2列，索引从0开始，需根据实际调整）
      var rowDate = moment(data[1], 'YYYY-MM-DD HH:mm:ss');

      // 判断当前行日期是否在选择范围内（[]表示包含起止日期）
      return rowDate.isBetween(startDate, endDate, null, '[]');
    }
  );
});

关键注意事项 #

• 日期格式统一：daterangepicker的格式必须与表格日期列的字符串格式完全匹配，否则日期解析会失败，过滤失效。
• 列索引调整：代码中日期列索引为data[1]，需根据你实际的表格列顺序修改（索引从0开始）。
• 服务器端处理场景：如果你的DataTables开启了serverSide: true，无需使用客户端ext.search扩展，而是在daterangepicker回调中把起止日期作为参数传给后端接口，由后端完成数据过滤后返回。示例代码如下：

  ajax: {
    url: '/your-api-url',
    data: function(d) {
      var dateRange = $('#daterange').val();
      if (dateRange) {
        d.startDate = dateRange.split(' - ')[0];
        d.endDate = dateRange.split(' - ')[1];
      }
    }
  }
  

这样就能完美实现daterangepicker与DataTables的联动过滤，且完全适配AdminLTE的UI风格啦！

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