Laravel如何在单个Blade视图中实现两个Datatables表格展示

实现方案说明 #

两种方案都可实现需求，可根据业务复杂度选择：

• 业务简单、两个表格同属员工管理模块，且后续不会有大量独立的司机业务逻辑：可放在同一个控制器处理
• 业务复杂、司机后续有独立的增删改查等全流程操作：推荐单独创建BusDriverController解耦

方案1：同一控制器处理（推荐当前场景使用） #

第一步：修改BranchManagerController代码

public function branchManager(Request $request)
{
    // 非AJAX请求只返回视图，serverside模式无需提前查询全量数据，删除无用的全量查询代码
    if ($request->ajax()) {
        $data = BranchManager::latest()->get();
        return Datatables::of($data)
        ->addIndexColumn()
        ->addColumn('action', function($row){
            $btn = '<a href="javascript:void(0)" data-toggle="tooltip"  data-id="'.$row->id.'" data-original-title="Edit" class="btn btn-sm btn-outline-light editRecord">Edit</a>';
            $btn = $btn.' <a href="javascript:void(0)" data-toggle="tooltip"  data-id="'.$row->id.'" data-original-title="Delete" class="btn btn-sm btn-outline-light deleteRecord"><i class="far fa-trash-alt btn-outline-danger"></i></a>';
            return $btn;
        })
        ->rawColumns(['action'])
        ->make(true);
    }
    // 若视图需要司机的初始数据可一并传入，serverside模式无需也可
    // $busDrivers = BusDriver::latest()->get();
    return view('admin.employee');
}

// 新增公交司机数据接口方法
public function busDriver(Request $request)
{
    if ($request->ajax()) {
        $data = BusDriver::latest()->get();
        return Datatables::of($data)
        ->addIndexColumn()
        ->addColumn('action', function($row){
            $btn = '<a href="javascript:void(0)" data-toggle="tooltip"  data-id="'.$row->id.'" data-original-title="Edit" class="btn btn-sm btn-outline-light editDriver">Edit</a>';
            $btn = $btn.' <a href="javascript:void(0)" data-toggle="tooltip"  data-id="'.$row->id.'" data-original-title="Delete" class="btn btn-sm btn-outline-light deleteDriver"><i class="far fa-trash-alt btn-outline-danger"></i></a>';
            return $btn;
        })
        ->rawColumns(['action'])
        ->make(true);
    }
    return abort(404);
}

第二步：新增路由配置

在路由文件中追加司机数据接口的路由：

Route::get('/employee', [BranchManagerController::class, 'branchManager'])->name('branchManager.list');
// 新增司机接口路由
Route::get('/bus-driver/list', [BranchManagerController::class, 'busDriver'])->name('busDriver.list');

第三步：修改JS代码，初始化第二个表格

$(function() {
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    // 原有分公司经理表格初始化
    var table1 = $('#example1').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('branchManager.list') }}",
        columns: [
            {data: 'branch_manager_name', name: 'branch_manager_name'},
            {data: 'contact_number', name: 'contact_number'},
            {data: 'action', name: 'action', orderable: true, searchable: true},
        ]
    });

    // 新增公交司机表格初始化
    var table2 = $('#example2').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('busDriver.list') }}",
        columns: [
            {data: 'bus_driver_name', name: 'bus_driver_name'},
            {data: 'contact_number', name: 'contact_number'},
            {data: 'action', name: 'action', orderable: true, searchable: true},
        ]
    });
});

方案2：单独创建BusDriverController #

如果后续司机模块有独立的业务逻辑，推荐用该方案，操作差异仅在以下两点：

1. 执行php artisan make:controller BusDriverController新建控制器，将方案1中的busDriver方法移入该控制器
2. 修改司机接口路由对应到新控制器：

use App\Http\Controllers\BusDriverController;

Route::get('/bus-driver/list', [BusDriverController::class, 'index'])->name('busDriver.list');

其余JS、视图代码均和方案1一致。

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