游乐游手机版
首页/前端开发/文章详情

Yajara DataTable单个日期精确筛选技巧

时间:2026-06-29 07:00
本文详解如何在 Lara vel 中使用 Yajara DataTable 实现按指定单日期(非日期范围)精确筛选数据,通过前端日期选择器 + 后端 whereDate 查询 + AJAX 传参,确保仅返回该日创建的记录。 刚好有读者聊到,在业务中经常需要按“某一天”而不是“某段时间”来查数据,比如
本文详解如何在 Lara vel 中使用 Yajara DataTable 实现按指定单日期(非日期范围)精确筛选数据,通过前端日期选择器 + 后端 whereDate 查询 + AJAX 传参,确保仅返回该日创建的记录。

刚好有读者聊到,在业务中经常需要按“某一天”而不是“某段时间”来查数据,比如查看2023年10月7日当天的全部订单。这种单日期精确筛选,Yajara DataTable默认是没有内置的,需要自己动手集成。下面这套方案,直接拿过去就能用,分三步走:前端加日期选择器、后端安全解析参数、配上一点进阶优化。

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

在视图里插一个标准的 HTML5 ,不依赖额外的JS初始化,只需要确保它的 nameid 和后端逻辑保持一致:

接着,在初始化 DataTable 的 Ja vaScript 里,通过 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 参数,然后用 Lara vel 的 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 '查看';        })        ->rawColumns(['action'])        ->make(true);}

⚠️ 这里有三件事得特别留心:

  • 第一,必须校验 $selectedDate 的格式有效性,防止恶意输入或空字符串引发SQL错误;
  • 第二,whereDate() 会自动把 created_at 字段转成 DATE() 类型比较,兼容 MySQL/PostgreSQL;
  • 第三,如果数据库里那张表的数据量不小,记得给 created_at 字段加个索引,比如 INDEX(created_at),否则全表扫描会很慢。

另外,如果用到了 updated_at 或其他时间字段,把字段名同步改掉就行。

✅ 进阶优化建议

  • 联动重载:给日期控件加上 change 事件,只要用户改了日期,表格自动重载:
$('#selected_date').on('change', function() {    $('#datatable').DataTable().ajax.reload();});

这样一来,数据表就能根据你选的日期自动刷新,用户体验就顺畅多了。

  • 默认日期:在 input 里设置 value="{{ now()->format('Y-m-d') }}",页面加载后默认显示今天的数据,省得用户手动选一次。
  • 多字段筛选:如果需求更复杂一点,可以扩展 data 函数,同时传递状态、类别等其他筛选参数,统一在后端用 where 组合条件。这个思路是一样的,改改参数名就行。

通过这三步,就可以零侵入地为 Yajara DataTable 添加精准的单日期筛选能力。既保持了代码的简洁性,也照顾到了安全性和可维护性,应该能应付大多数业务场景了。

来源:https://www.php.cn/faq/2662522.html
上一篇纯CSS实现点击锚点显示内容并自动隐藏其他元素 下一篇uni-app自定义风格图片选择预览组件实现方法
本站内容用于信息整理与展示,如有侵权或内容问题请及时联系处理。

相关推荐

补充同频道和同主题内容,方便继续浏览更多相关内容。

同类最新

继续查看同栏目最近更新的文章。

更多
如何在JavaScript中实现基于旋转视野的FOV射线绘制详解
前端开发 · 2026-07-01

如何在JavaScript中实现基于旋转视野的FOV射线绘制详解

如果用一句话概括核心,那就是:在 RayCasting 游戏开发中,绘制动态视野边界线(FOV)最可靠的方式是在逻辑层通过数学公式将坐标“算”出来,而不是依赖 Canvas 绘图上下文的旋转操作。 在实现类似 Doom 风格的 RayCasting 游戏时,动态视野(Field of View, F

TypeScript后端数据正确映射为前端接口类型的方法
前端开发 · 2026-07-01

TypeScript后端数据正确映射为前端接口类型的方法

在后端数据与前端类型之间来回转换,几乎是每位 TypeScript 开发者都无法回避的常态。后端返回的 car_brand、reg_number,和前端接口中定义的 brand、govtNumber,命名风格常常对不上号。此时,如果为了省事直接用 as 类型断言“强行”指认类型,那就踩进了常见的陷阱

动态HTML表格按层级条件合并单元格的JavaScript实现
前端开发 · 2026-07-01

动态HTML表格按层级条件合并单元格的JavaScript实现

本文详细讲解一种递归式 JavaScript 合并单元格方法,用于按列优先级(如前3列)智能合并表格行:仅当前一列已合并的前提下,才允许后续列合并相同值,从而精准实现多级分组与层级表格合并效果。 在动态生成的 HTML 表格中,按业务逻辑合并重复行是常见需求。然而,简单地对单列分别遍历合并——例如先

Next.js 13+重定向后滚动失效解决方案
前端开发 · 2026-07-01

Next.js 13+重定向后滚动失效解决方案

在 Next js App Router 的日常开发中,有一个令人颇为困扰的异常现象——当服务端执行 `redirect()` 跳转后,目标页面竟然无法正常滚动。没错,页面已经渲染完成,内容也完整显示,但垂直滚动条仿佛凭空消失。这个问题在 Next js 13 5 4 版本中尤为突出。 先给出结论:

WebGL图像加载延迟的纹理初始化时立即显示方法
前端开发 · 2026-07-01

WebGL图像加载延迟的纹理初始化时立即显示方法

本文详细介绍如何利用 Promise 与 async await 重构 WebGL 纹理加载流程,彻底解决首次渲染显示蓝色占位色、需要手动交互才能刷新的问题,实现文件导入后四张纹理平面即时正确渲染。 实际上,这个坑在 WebGL 开发中相当常见——纹理异步加载的小陷阱,说起来不大,但第一次遇到确实令