如何让服务端Ajax加载的DataTable优先显示今日数据再按日期升序？

因为是服务端加载数据，核心排序逻辑必须在后端实现，前端只需配合传递参数或直接接收有序结果，以下是具体实现方案：

一、后端核心排序逻辑处理 #

直接在数据库查询时通过自定义排序规则，把今日数据放在最前面，剩余数据按日期升序排列：

示例1：原生SQL（以MySQL为例） #

假设你的日期列名为date_column，用CASE语句标记今日数据的优先级，再按日期升序排序：

SELECT * FROM your_table
ORDER BY
  -- 今日数据标记为0，优先级高于非今日的1
  CASE WHEN DATE(date_column) = CURDATE() THEN 0 ELSE 1 END,
  date_column ASC;

示例2：Laravel ORM场景 #

用orderByRaw实现自定义排序规则：

$records = YourModel::orderByRaw("CASE WHEN DATE(date_column) = CURDATE() THEN 0 ELSE 1 END")
                    ->orderBy('date_column', 'asc')
                    ->get();

return response()->json([
  'data' => $records,
  // 其他DataTable需要的参数，比如draw、recordsTotal等
]);

注意时区问题 #

如果用户和服务器时区不同，要统一日期判断的基准：

• 可以让前端传递用户当前的日期（比如new Date().toLocaleDateString()）给后端，替换CURDATE()
• 或者统一用UTC时间处理，比如MySQL用UTC_DATE()，前端把日期转成UTC后再传递

二、前端DataTable配合优化 #

如果需要让用户手动切换「今日优先」和普通排序模式，可以通过自定义按钮传递参数给后端：

$('#your-datatable').DataTable({
  ajax: {
    url: '/api/your-data-endpoint',
    data: function(d) {
      // 传递自定义排序标识给后端
      d.sort_mode = $('#today-first-btn').hasClass('active') ? 'today_first' : 'normal';
    }
  },
  columns: [
    { data: 'date_column', title: '日期' },
    // 其他列配置...
  ],
  dom: 'Bfrtip',
  buttons: [
    {
      text: '优先显示今日数据',
      className: 'btn-today-first',
      action: function(e, dt, node) {
        node.toggleClass('active');
        dt.ajax.reload(); // 重新加载数据
      }
    }
  ]
});

后端收到sort_mode参数后，判断是否应用今日优先的排序逻辑，否则使用默认的升序/降序。

性能优化提示 #

如果数据量较大，务必给日期列添加索引，避免DATE(date_column)导致索引失效——可以考虑在表中新增一个仅存储日期的字段（比如date_only），并建立索引，查询时直接用这个字段判断，提升性能。

内容的提问来源于stack exchange，提问作者Regis Silva