如何在同一页面使用带参数的多个Yajra DataTables？

问题原因 #

你当前的写法中，admin_dashboard方法里通过->with()传递的参数仅在首次渲染DataTable HTML时有效，但当DataTable发起AJAX请求到get_datatable1/2接口时，新实例化的DataTable对象并未携带这些参数，且AJAX请求本身也没把参数传递过去，导致查询时无法获取from和to值。

解决步骤 #

1. 修改AJAX请求配置，携带参数

在DataTable的配置代码中，替换原有的minifiedAjax，改为传递请求参数：

// 以TableOneDataTable为例
->ajax([
    'url' => '/get_datatable1',
    'data' => function(d) {
        // 若参数是页面静态值，直接从视图变量获取
        d.from = '{{ $from }}';
        d.to = '{{ $to }}';
        // 若是用户可动态修改的参数（比如日期选择器），则用JS获取值：
        // d.from = $('#from_date').val();
        // d.to = $('#to_date').val();
    }
])

2. 修改接口方法，接收并传递参数

更新控制器中的get_datatable1和get_datatable2方法，从请求中获取参数后，再传递给DataTable实例：

use Illuminate\Http\Request;

public function get_datatable1(Request $request, TableOneDataTable $dataTable1)
{
    // 从请求中获取参数，默认值设为当前日期
    $from = $request->get('from', date('Y-m-d'));
    $to = $request->get('to', date('Y-m-d'));
    
    return $dataTable1->with(['from' => $from, 'to' => $to])->render('operation.admin_dashboard');
}

public function get_datatable2(Request $request, TableTwoDataTable $dataTable2)
{
    $from = $request->get('from', date('Y-m-d'));
    $to = $request->get('to', date('Y-m-d'));
    
    return $dataTable2->with(['from' => $from, 'to' => $to])->render('operation.admin_dashboard');
}

3. 保留DataTable类的查询逻辑

你当前DataTable类中的query方法无需修改，Yajra的->with()方法会自动将参数绑定到实例属性，$this->from和$this->to可以正常获取值：

public function query(OperationAssignment $model)
{
    return $model->newQuery()
        ->with('created_user:id,first_name,last_name','updated_user:id,first_name,last_name')
        ->where('date','>=',$this->from)
        ->where('date','<=',$this->to);
}

额外说明 #

如果需要支持用户动态修改日期（比如添加日期选择器），只需在视图中添加对应的表单元素，然后在AJAX的data回调里通过JS获取最新值即可，接口方法会自动接收新参数并更新查询条件。

内容的提问来源于stack exchange，提问作者Woaraka Been Mahbub