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

【问题标题】：How can I have Multiple Yajra Datatables on one page in Laravel?如何在 Laravel 的一页上拥有多个 Yajra 数据表？
【发布时间】：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()
            ...
    }
    ...
}

【问题讨论】：

标签： php laravel datatables yajra-datatable

【解决方案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() !!}

【讨论】：