Laravel 8中Yajra-Datatables数据不显示问题求助

以下是针对你代码的排查和修复方案：

1. 修正Table ID错误 #

视图中表格的id属性包含空格，导致jQuery选择器无法定位元素：

<!-- 错误写法 -->
<table id="datatable yajra-datatable" ...>

<!-- 正确写法 -->
<table id="yajra-datatable" class="table table-striped table-no-bordered table-hover" cellspacing="0" width="100%" style="width:100%">

2. 调整ServerSide模式下的数据查询逻辑 #

ServerSide模式需要Yajra Datatables处理分页、排序、搜索，不能直接用Voucher::all()一次性取出所有数据，改用查询构建器：

public function index(Request $request) {
    if ($request->ajax()) {
        $data = Voucher::query(); // 替换Voucher::all()
        return DataTables::of($data)
            ->addIndexColumn()
            ->addColumn('action', function($row){
                $actionBtn = '<a href="javascript:void(0)" class="edit btn btn-success btn-sm">Edit</a> <a href="javascript:void(0)" class="delete btn btn-danger btn-sm">Delete</a>';
                return $actionBtn;
            })
            ->rawColumns(['action'])
            ->make(true);
    }
    return view('backend.menu.settings.voucher.list');
}

3. 验证路由配置 #

确保web.php中正确定义了voucher.index路由：

Route::get('/vouchers', [\App\Http\Controllers\VoucherController::class, 'index'])->name('voucher.index');

4. 检查模型字段与前端配置匹配 #

确认Voucher模型的数据库字段code、type、value、start、expired存在且拼写正确。如果start/expired是日期字段，可在Datatables中格式化：

// 在控制器的DataTables链式调用中添加
->addColumn('start', function($row){
    return $row->start->format('Y-m-d'); // 按需调整日期格式
})
->addColumn('expired', function($row){
    return $row->expired->format('Y-m-d');
})

同时确保模型中已将这些字段设置为日期类型：

// Voucher模型中
protected $casts = [
    'start' => 'datetime',
    'expired' => 'datetime',
];

5. 确认前端依赖加载完整 #

确保视图中加载了jQuery和Yajra Datatables的CSS/JS：

<!-- 加载顺序：先jQuery，再Datatables -->
<script src="{{ asset('js/jquery.min.js') }}"></script>
<link rel="stylesheet" href="{{ asset('vendor/datatables/css/dataTables.bootstrap4.min.css') }}">
<script src="{{ asset('vendor/datatables/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('vendor/datatables/js/dataTables.bootstrap4.min.js') }}"></script>

6. 调试AJAX请求 #

打开浏览器开发者工具（F12）→ Network标签，查看voucher.index的AJAX请求：

• 检查请求状态码是否为200
• 查看响应数据的data数组是否包含正确字段
• 若有错误，根据响应中的错误信息定位问题（如SQL语法错误、字段不存在等）

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