如何在 Laravel 的一页上拥有多个 Yajra 数据表？

Posted 2023-05-09

【中文标题】如何在 Laravel 的一页上拥有多个 Yajra 数据表？

【英文标题】：How can I have Multiple Yajra Datatables on one page in Laravel?

【发布时间】：2021-11-19 14:56:57

【问题描述】：

问题：我需要在现金页面中使用“产品数据表” 此页面上已存在“Cash DataTable”。

我已经搜索过这个问题，但我很惊讶以前没有人问过这个问题，所以当我找到这个问题的解决方案时，我决定与其他程序员分享我的解决方案。希望对你有用。

让我先说一下我工作的版本。

“laravel/框架”：“^8.40” "yajra/laravel-datatables-buttons": "^4.0", "yajra/laravel-datatables-html": "^4.0", “yajra/laravel-datatables-oracle”：“~9.0”

现在我展示我的项目结构

我有路线：列表

 GET|HEAD | cash | cash.index| App\Http\Controllers\CashController@index
 GET|HEAD | product | product.index| App\Http\Controllers\ProductController@index

CashController.php

public function index(CashDataTable $cashDataTable)


    return $cashDataTable->render('cash.index');

Cash.index.blade.php

!! $dataTableCash->table(['id'=>'dataTable']) !!
!! $dataTableCash->scripts() !!

CashDataTable.php

使用 App\Models\Cash；

class CashDataTable extends DataTable

    public function dataTable($query)
    
        $dataTable = new EloquentDataTable($query);

        return $dataTable->addColumn('action', 'cash.datatables_actions');
    
    
    public function html()
    
        return $this->builder()
            ->columns($this->getColumns())
            ->minifiedAjax()
            ...
    
    ...

ProductDataTable.php

use App\Models\Product;

class ProductDataTable extends DataTable

    public function dataTable($query)
    
        $dataTable = new EloquentDataTable($query);

        return $dataTable->addColumn('action', 'product.datatables_actions');
    
    
    public function html()
    
        return $this->builder()
            ->columns($this->getColumns())
            ->minifiedAjax()
            ...
    
    ...

【参考方案1】：

我认为“Yajra \ DataTables \ Services;”设计为只显示一个表，但我找到了解决方案：

首先，我们需要覆盖和更改 CashDataTable 和 ProductDataTable 中的默认 dataTable 变量， 其次，我们需要在 HTML minifiedAjax 中直接设置路由 URL。

CashDataTable.php

use App\Models\Cash;

protected $dataTableVariable = 'dataTableCash';

class CashDataTable extends DataTable

    public function dataTable($query)
    
        $dataTable = new EloquentDataTable($query);

        return $dataTable->addColumn('action', 'cash.datatables_actions');
    
    
    public function html()
    
        return $this->builder()
            ->columns($this->getColumns())
            ->minifiedAjax('/cash')
            ...
    
    ...

ProductDataTable.php

use App\Models\Product;

class ProductDataTable extends DataTable

    protected $dataTableVariable = 'dataTableProduct';

    public function dataTable($query)
    
        $dataTable = new EloquentDataTable($query);

        return $dataTable->addColumn('action', 'product.datatables_actions');
    
    
    public function html()
    
        return $this->builder()
            ->columns($this->getColumns())
            ->minifiedAjax('/product')
            ...
    
    ...

现在在 CashController 中，我们需要将变量设置为 HTML builder。

CashController.php

public function index(CashDataTable $cashDataTable, ProductDataTable $productDataTable)

    $dataTableProduct = $productDataTable->html();

    return $cashDataTable->render('cash.index', compact('dataTableProduct'));

Cash.index.blade.php

!! $dataTableCash->table(['id'=>'dataTableCash']) !!
!! $dataTableCash->scripts() !!

!! $dataTableProduct->table(['id'=>'dataTableProduct']) !!
!! $dataTableProduct->scripts() !!