一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

Yajara DataTable 单日期精确筛选教程

时间:2026-06-20 10:58:46 编辑:袖梨 来源:一聚教程网

本文详解如何在 Laravel 中使用 Yajara DataTable 实现按指定单日期(非日期范围)精确筛选数据,通过前端日期选择器 + 后端 whereDate 查询 + AJAX 传参,确保仅返回该日创建的记录。

本文详解如何在 laravel 中使用 yajara datatable 实现按指定单日期(非日期范围)精确筛选数据,通过前端日期选择器 + 后端 `wheredate` 查询 + ajax 传参,确保仅返回该日创建的记录。

在实际业务中,常需按“某一天”而非“某段时间”筛选数据(如查看 2023-10-07 全部订单),Yajara DataTable 默认不内置日期筛选逻辑,需手动集成。以下是完整、可落地的实现方案:

✅ 前端:添加日期选择器并绑定 AJAX 参数

在视图中插入标准 HTML5 <input type="date">,无需额外 JS 初始化,但需确保其 name 和 id 与后续 JS 引用一致:

<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"></div>

随后,在初始化 DataTable 的 JavaScript 中,通过 ajax.data 回调将选中的日期值动态注入请求参数:

$('#datatable').DataTable({    processing: true,    serverSide: true,    ajax: {        url: '/admin/orders/data', // 替换为你的数据接口路由        method: 'GET',        data: function (d) {            d.selected_date = $('#selected_date').val() || '';        }    },    columns: [        { data: 'id', name: 'id' },        { data: 'customer_name', name: 'customer_name' },        { data: 'created_at', name: 'created_at', render: function (data) {            return moment(data).format('YYYY-MM-DD HH:mm');        }},        // 其他列...    ]});

? 提示:建议搭配 moment.js 或原生 Intl.DateTimeFormat 格式化时间列,提升可读性。

✅ 后端:控制器中安全解析并应用 whereDate

在对应控制器方法中,接收 selected_date 参数,并使用 Laravel 的 whereDate() 方法进行精确匹配(自动忽略时间部分,仅比对年-月-日):

use YajraDataTablesFacadesDataTables;use AppModelsOrder; // 替换为你的模型public function getData(Request $request){    $selectedDate = $request->input('selected_date');    $query = Order::query();    // 仅当日期有效时才添加筛选条件(避免空值导致全表扫描)    if (!empty($selectedDate) && CarbonCarbon::createFromFormat('Y-m-d', $selectedDate)->isValid()) {        $query->whereDate('created_at', $selectedDate);    }    return DataTables::of($query)        ->addColumn('action', function ($row) {            return '<a href="'.route('orders.show', $row->id).'">查看</a>';        })        ->rawColumns(['action'])        ->make(true);}

⚠️ 注意事项:

  • 必须校验 $selectedDate 格式有效性(防止恶意输入或空字符串引发 SQL 错误);
  • whereDate() 会自动将 'created_at' 字段转为 DATE() 类型比较,兼容 MySQL/PostgreSQL;
  • 若使用 updated_at 或其他时间字段,请同步修改字段名;
  • 确保数据库中该时间字段已建立索引(如 INDEX(created_at)),以保障查询性能。

✅ 进阶优化建议

  • 联动重载:为日期控件添加 change 事件,自动重载表格:
    $('#selected_date').on('change', function() {    $('#datatable').DataTable().ajax.reload();});
  • 默认日期:可在 input 中设置 value="{{ now()->format('Y-m-d') }}",默认显示今日数据;
  • 多字段筛选:可扩展 data 函数,同时传递状态、类别等其他筛选参数,统一在后端组合 where 条件。

通过以上三步,即可零侵入地为 Yajara DataTable 添加精准单日期筛选能力,兼顾简洁性、安全性与可维护性。

热门栏目