Laravel下Yajra DataTable日期范围过滤器返回无效JSON问题求助

• 控制器未注入Request实例，导致调用$request->from_date时抛出未定义变量错误，返回的非标准JSON格式触发Datatables报错
• JS中Datatables的columns配置项数量和HTML表格<thead>里的<th>数量不匹配：HTML共12个表头，JS仅配置了10个列，Datatables要求列数必须一一对应
• JS中设置了dataSrc: ""，而Yajra Datatables默认返回的数据集存放在响应的data字段下，该配置导致Datatables无法识别数据节点
• 部分列映射错误：第一个表头是序号列，JS配置中第一个列绑定的是store_id，与表头逻辑不匹配

修正后的代码 #

1. 控制器代码 #

首先在控制器顶部引入Request类，再修改filter方法：

// 控制器顶部先引入Request
use Illuminate\Http\Request;

public function filter(Request $request) 
{
    if(request()->ajax())
    {
        $query = DB::table('cash_out_details');
        // 如果需要展示门店名称，可关联store表，示例如下：
        // $query->join('stores', 'cash_out_details.store_id', '=', 'stores.id')
        //       ->select('cash_out_details.*', 'stores.street_name as store_name');
        
        if(!empty($request->from_date) && !empty($request->to_date))
        {
            $query->whereBetween('recorded_date', [$request->from_date, $request->to_date]);
        }
        $data = $query->get();
        
        return datatables()->of($data)
            // 自动生成序号列
            ->addIndexColumn()
            // 生成操作列，可根据业务需求调整按钮内容
            ->addColumn('action', function($row){
                return '<a href="'.route('cashoutdetails.edit', $row->id).'" class="btn btn-sm btn-primary mr-1">编辑</a><a href="'.route('cashoutdetails.delete', $row->id).'" class="btn btn-sm btn-danger">删除</a>';
            })
            ->rawColumns(['action'])
            ->make(true);
    }
    return view('cashoutdetails.index');
}

2. JS脚本代码 #

<script>
    $(document).ready(function() {
        $('.input-daterange').datepicker({
            todayBtn:'linked',
            format:'yyyy-mm-dd',
            autoclose:true
        });

        load_data();

        function load_data(from_date = '', to_date = '')
        {
            // 先销毁已存在的实例，避免重复初始化报错
            if ($.fn.DataTable.isDataTable('#order_table')) {
                $('#order_table').DataTable().destroy();
            }
            $('#order_table').DataTable({
                processing: true,
                serverSide: true, // 数据量较大时建议开启服务端渲染
                ajax: {
                    url:'{{ route("cashoutdetails.filter") }}',
                    data:{from_date:from_date, to_date:to_date}
                },
                columns: [
                    // 对应第一个序号列
                    {
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    // 对应第二个Store Name列，关联store表后可替换为store_name
                    {
                        data:'store_id',
                        name:'store_id'
                    },
                    {
                        data:'recorded_date',
                        name:'recorded_date'
                    },
                    {
                        data:'closing_report_total',
                        name:'closing_report_total'
                    },
                    {
                        data:'total_deposit',
                        name:'total_deposit'
                    },
                    {
                        data:'difference',
                        name:'difference'
                    },
                    {
                        data:'prepared_by',
                        name:'prepared_by'
                    },
                    {
                        data:'deposited_by',
                        name:'deposited_by'
                    },
                    {
                        data:'deposit_date',
                        name:'deposit_date'
                    },
                    {
                        data:'reference_number',
                        name:'reference_number'
                    },
                    {
                        data:'comments',
                        name:'comments'
                    },
                    // 对应最后一个操作列
                    {
                        data:'action',
                        name:'action',
                        orderable: false,
                        searchable: false
                    }
                ]
            });
        }

        $('#filter').click(function(){
            var from_date = $('#from_date').val();
            var to_date = $('#to_date').val();
            if(from_date != '' &&  to_date != '')
            {
                load_data(from_date, to_date);
            }
            else
            {
                alert('请选择起止日期');
            }
        });
    });
</script>

额外排查步骤 #

如果修改后仍有问题，可按以下步骤验证：

• 打开浏览器控制台网络面板，找到cashoutdetails.filter对应的请求，查看响应内容，确认返回的是标准JSON格式而非PHP错误堆栈
• 确认cash_out_details表中存在recorded_date、store_id等配置的所有字段，没有拼写错误
• 确认Yajra Datatables服务提供者已经在config/app.php中正确注册

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