Yajara DataTable单日期过滤需求：如何筛选指定日期数据

前端实现 #

• 添加日期选择输入框：

<input type="date" id="filter_date" class="form-control" placeholder="选择过滤日期">

• 初始化DataTable时传递日期参数：

// 保留DataTable实例以便后续调用
const table = $('#dataTable').DataTable({
    processing: true,
    serverSide: true,
    ajax: {
        url: "{{ route('your.data.source.route') }}",
        data: function(d) {
            // 将选中日期传入后端接口
            d.filter_date = $('#filter_date').val();
        }
    },
    columns: [
        { data: 'id', name: 'id' },
        { data: 'created_at', name: 'created_at' },
        // 配置你的其他数据列
    ]
});

• 监听日期变化，触发表格重新加载：

$('#filter_date').on('change', function() {
    table.draw();
});

后端实现（Laravel环境） #

• 在数据接口控制器中处理日期过滤逻辑：

use Carbon\Carbon;
use Illuminate\Http\Request;
use Yajra\DataTables\Facades\DataTables;

public function getFilteredData(Request $request)
{
    $query = YourModel::query();

    // 若存在有效日期参数，过滤当天录入的数据
    if ($request->filled('filter_date')) {
        $targetDate = Carbon::parse($request->filter_date)->toDateString();
        $query->whereDate('created_at', $targetDate);
    }

    return DataTables::of($query)->make(true);
}

注意事项 #

• 替换YourModel为实际的数据模型，created_at为你存储录入时间的字段。
• 若使用第三方日期选择插件（如Flatpickr），只需调整输入框的初始化和事件监听逻辑，核心是传递选中的日期字符串到后端。

内容的提问来源于stack exchange，提问作者S.K Saxena