Laravel 5.5中如何用Yajra V8.x jQuery DataTables接收控制器集合

针对你的需求，我整理了两种实用的实现方案，分别适用于不同的数据量场景，帮你快速搞定DataTables和Laravel集合的对接：

先确认Yajra DataTables的安装 #

首先要确保你已经安装了对应V8.x版本的包，在项目根目录执行：

composer require yajra/laravel-datatables:^8.0

Laravel 5.5支持自动发现服务提供者，要是没自动加载成功，手动在config/app.php里添加：

• 服务提供者：Yajra\DataTables\DataTablesServiceProvider::class,
• 别名：'DataTables' => Yajra\DataTables\Facades\DataTables::class,

方案一：客户端渲染（适合小数据量） #

你的现有代码已经把查询结果$result传到了b_1.blade.php，我们可以直接把集合转成JSON格式，让DataTables读取渲染：

修改b_1.blade.php代码： #

<table class="table table-bordered" id="users-table">
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

<script>
$(function() {
    // 把后端传递的集合转成前端可识别的JSON
    var tableData = {!! json_encode($result) !!};
    
    $('#users-table').DataTable({
        data: tableData,
        columns: [
            { data: 'id' }, // 要和你查询结果里的字段名完全匹配
            { data: 'name' }
        ],
        // 可选配置：自定义分页条数、开启响应式等
        pageLength: 10,
        responsive: true
    });
});
</script>

注意：columns里的data值必须和你查询返回的字段名一致，比如你查的是user_id，这里就要写user_id

方案二：服务器端AJAX渲染（推荐，大数据量首选） #

这种方式下，控制器不再返回视图，而是直接返回DataTables标准的JSON数据，前端通过AJAX请求获取，自动支持分页、排序、搜索等功能，性能更好：

1. 调整路由（web.php） #

// 展示表格页面的路由
Route::get('a_1', 'CodoController@showTablePage');
// 处理DataTables AJAX请求的路由
Route::get('a_1/datatable-data', 'CodoController@getDatatableData')->name('datatable.data');

2. 修改控制器逻辑（CodoController.php） #

use Yajra\DataTables\Facades\DataTables;

// 返回表格页面，不用传递数据
public function showTablePage()
{
    return view('b_1');
}

// 处理DataTables的AJAX请求，返回JSON数据
public function getDatatableData(Request $request)
{
    // 构建查询（注意不要调用->get()，保留查询构造器实例）
    $query = DB::table('your_table_name') // 替换成你的表名
                ->select('id', 'name') // 替换成你需要展示的字段
                // 可选：添加搜索逻辑，适配DataTables的搜索框
                ->when($request->filled('search.value'), function ($q) use ($request) {
                    $searchValue = $request->search['value'];
                    $q->where('name', 'like', "%{$searchValue}%")
                      ->orWhere('id', 'like', "%{$searchValue}%");
                });
    
    // 用Yajra处理查询并返回标准JSON
    return DataTables::of($query)->make(true);
}

3. 更新b_1.blade.php前端代码 #

<table class="table table-bordered" id="users-table">
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
        </tr>
    </thead>
</table>

<script>
$(function() {
    $('#users-table').DataTable({
        processing: true, // 显示加载提示
        serverSide: true, // 开启服务器端处理
        ajax: "{{ route('datatable.data') }}", // 对应我们定义的AJAX路由
        columns: [
            { data: 'id' },
            { data: 'name' }
        ],
        // 可选配置
        pageLength: 10,
        responsive: true
    });
});
</script>

重要注意事项 #

• 必须确保前端已经引入了jQuery和DataTables的CSS/JS文件（可以使用本地资源或者官方提供的安装包）；
• 如果用Eloquent模型代替DB查询构造器，直接把模型查询实例传给DataTables::of()即可，比如DataTables::of(User::query())->make(true)；
• 字段名一定要严格匹配，否则DataTables无法正确渲染数据。

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