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

Question

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

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

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

• “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()
            ...
    }
    ...
}

产品数据表.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()
            ...
    }
    ...
}

Answer 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')
            ...
    }
    ...
}

产品数据表.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 构建器。

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() !!}

Answer 2

如果使用两个不同的DataTable，并且每个DataTable具有不同的列，则可能会出现错误，并且两个表的相关数据可能会显示为空。