本文介绍如何在 Laravel 中使用 Yajra DataTable 实现基于单选日期的精确数据过滤（非日期范围），通过前端日期选择器 + 后端 whereDate 查询，精准匹配指定日期当天的所有记录。
本文介绍如何在 laravel 中使用 yajra datatable 实现基于单选日期的精确数据过滤（非日期范围），通过前端日期选择器 + 后端 `wheredate` 查询，精准匹配指定日期当天的所有记录。
在使用 Yajra DataTable 进行服务端渲染时，若需支持「仅按某一天筛选」（例如只查 2023-10-07 当天创建的记录），关键在于避免使用模糊的时间范围（如 whereBetween），而应采用 Laravel 的 whereDate() 方法——它会自动剥离时间部分，仅比对年月日，确保结果严格限定于目标日期。
✅ 后端实现（Controller）
在数据表处理逻辑中，接收前端传入的 selected_date 参数，并动态构建查询：
use Yajra\DataTables\Facades\DataTables;
public function index(Request $request)
{
$selectedDate = $request->input('selected_date');
$query = YourModel::query();
if (!empty($selectedDate)) {
// 精确匹配 created_at 字段的日期部分（忽略时分秒）
$query->whereDate('created_at', $selectedDate);
}
return DataTables::of($query)
->addColumn('action', function ($row) {
return '<a href="'.route('model.show',%20%24row->id).'">View</a>';
})
->rawColumns(['action'])
->make(true);
}
⚠️ 注意：确保 $selectedDate 格式为 Y-m-d（如 '2023-10-07'）。Laravel 的 whereDate() 内部会自动转换为数据库兼容的日期比较（如 MySQL 的 DATE(created_at) = '2023-10-07'），无需手动格式化。
✅ 前端视图（Blade）
添加标准 HTML5 日期选择器，并确保其 name 与后端接收参数名一致：
<div class="form-group mb-3">
<label for="selected_date" class="form-label">选择日期：</label>
<input type="date" class="form-control" id="selected_date" name="selected_date" value="{{ old('selected_date') }}">
</div>
| ID | 标题 | 创建时间 | 操作 |
|---|
✅ 初始化 DataTable（含 AJAX 参数传递）
使用 data 函数将选中的日期值注入每次 AJAX 请求，确保筛选条件实时生效：
$(document).ready(function() {
$('#datatable').DataTable({
processing: true,
serverSide: true,
ajax: {
url: '{{ route('your.data.table.endpoint') }}',
data: function (d) {
d.selected_date = $('#selected_date').val(); // 动态传参
}
},
columns: [
{ data: 'id', name: 'id' },
{ data: 'title', name: 'title' },
{
data: 'created_at',
name: 'created_at',
render: function(data) {
return moment(data).format('YYYY-MM-DD HH:mm');
}
},
{ data: 'action', name: 'action', orderable: false, searchable: false }
],
// 可选：监听日期变更后重载表格
drawCallback: function() {}
});
// 日期变更时自动重载表格
$('#selected_date').on('change', function() {
$('#datatable').DataTable().ajax.reload();
});
});
? 增强建议
- 添加 moment.js 或原生 Intl.DateTimeFormat 格式化时间列，提升可读性；
- 在控制器中对 $selectedDate 做基础校验（如 Carbon::createFromFormat('Y-m-d', $selectedDate) 防止非法输入）；
- 若需支持清空筛选，可设置日期输入框初始值为空，并在 JS 中允许 null 值触发 reload。
通过以上三步整合，即可零配置实现 Yajra DataTable 的单日期精准过滤，兼顾简洁性与生产可用性。
