Laravel 数据表在一个视图中传递两个实例

Question

我正在尝试将两个 DataTables 实例发送到我的视图。该场景涉及一个选项卡菜单，每个选项卡都包含一个相应的表。这是我采取的方法。

我的控制器

    public function show(AuthorityPage $authorityPage, 
        AuthorityPageGuideContentDataTable $authorityPageGuideContentDataTable, 
        AuthorityPageAccordionDataTable $authorityPageAccordionDataTable
        )
    {
       
        $blogPosts = BlogPost::where('domain_id', getCurrentDomain())->where('is_active',true)
        ->select(['id','name'])->get();
        $tours = Tour::where('domain_id', getCurrentDomain())
            ->with('generalDetail')->get();
        $destinations = Destination::where('domain_id', getCurrentDomain())
            ->select(['id','name'])->get();
        $keywordIntents = [
            'i' => 'Informational',
            'n' => 'Navigational',
            't' => 'Transactional',
            'c' => 'Commercial',
        ];

$accordionDt = $authorityPageAccordionDataTable->with([
            'authorityPage' => $authorityPage
        ])->html();
$authorityContentDt = $authorityPageGuideContentDataTable->with([
            'authorityPage' => $authorityPage
        ])->html();

return view('pages.authority-pages.show', compact(
            'authorityPage', 
            'blogPosts', 
            'tours', 
            'destinations', 
            'keywordIntents', 
            'authorityContentDt', // first dt
            'accordionDt' //2nd dt
        ));

在我的第一个选项卡视图中，我通过

渲染数据表

    <div class="card-body py-4">
        <div class="table-responsive">
            {{ $authorityContentDt->table()}}
        </div>
    </div>

在我的第二个选项卡中

  <div class="card-body py-4">
            <div class="table-responsive">
                {{ $accordionDt->table() }}
            </div>
        </div>

我的数据表类之一（类似于我的所有数据表类）

class AuthorityPageGuideContentDataTable extends DataTable
{
    public function dataTable(QueryBuilder $query): EloquentDataTable
    {
        return (new EloquentDataTable($query))
        ->editColumn('guide_type', function (DestinationGuideDetails $destinationGuideDetails) {
            return DestinationGuideType::byValue($destinationGuideDetails->guide_type)->name;
        })
        ->editColumn('content', function (DestinationGuideDetails $destinationGuideDetails) {
            return strip_tags($destinationGuideDetails->content);
        })
        ->addColumn('action', function (DestinationGuideDetails $destinationGuideDetails) {
            return '<button class="btn btn-icon btn-active-light-primary w-30px h-30px" onclick="deletedestinationGuideContent('.$this->authorityPage->id.' , '.$destinationGuideDetails->id.')"> '.getIcon("trash","fs-3").'</button>
            <button data-bs-toggle="modal" data-bs-target="#kt_modal_1" class="btn btn-icon btn-active-light-primary w-30px h-30px" onclick="getContent('.$this->authorityPage->id.','.$destinationGuideDetails->id.')"> '.getIcon("notepad-edit","fs-3").'</button>';
        })
        ->rawColumns(['action'])
        ->setRowId(function ($destinationGuideDetails) {
            return "destination-guide-details-{$destinationGuideDetails->id}";
        });
    }

    public function query(DestinationGuideDetails $model): QueryBuilder
    {
        $query = $model->newQuery()
        ->join('destination_guides', 'destination_guide_details.destination_guide_id', '=', 'destination_guides.id')
        ->where('destination_guides.guideable_id', $this->authorityPage->id)
        ->where('destination_guides.guideable_type', 'App\Models\AuthorityPage')
        ->select('destination_guide_details.*');
        return $query;
    }

    public function html(): HtmlBuilder
    {
        return $this->builder()
        ->setTableId('destination-guide-table')
        ->columns($this->getColumns())
        ->minifiedAjax()
        ->dom('rt' . "<'row'<'col-sm-12 col-md-5'l><'col-sm-12 col-md-7'p>>",)
        ->addTableClass('table align-middle table-row-dashed fs-6 gy-5 dataTable no-footer text-gray-600 fw-semibold')
        ->setTableHeadClass('text-start text-muted fw-bold fs-7 text-uppercase gs-0');
    }


    public function getColumns(): array
    {
        return [
            Column::make('guide_type')->name('guide_type'),
            Column::make('content')->name('Content'),
            Column::make('action')->name('Action')->width('10%'),
        ];
    }

    protected function filename(): string
    {
        return 'AuthorityPageGuideContent_' . date('YmdHis');
    }
}

问题是它返回一个警报说

DataTables warning: table id=destination-guide-table - Invalid JSON response. 
For more information about this error, please see http://datatables.net/tn/1

Answer 1

首先，设置调用 DataTable 类的路由：

Route::get('/authority-pages/{authorityPage}/destination-guide', [AuthorityPageController::class, 'getAuthorityPageGuideContentData'])->name('authority-pages-get-destination-guide-content');
Route::get('/authority-pages/{authorityPage}/accordions', [AuthorityPageController::class, 'getAuthorityPageAccordionData'])->name('authority-pages-get-accordions');

在您的控制器中，确保方法如下所示：

public function getAuthorityPageAccordionData(AuthorityPage $authorityPage, AuthorityPageAccordionDataTable $authorityPageAccordionDataTable)
{
    return $authorityPageAccordionDataTable->with([
        'authorityPage' => $authorityPage
    ])->render('pages.authority-pages.show');
}

public function getAuthorityPageGuideContentData(AuthorityPage $authorityPage, AuthorityPageGuideContentDataTable $authorityPageGuideContentDataTable)
{
    return $authorityPageGuideContentDataTable->with([
        'authorityPage' => $authorityPage
    ])->render('pages.authority-pages.show');
}

现在，在您的 show 方法中，从 DataTable 实例调用 html() 方法。您可以在视图中使用生成的变量，如下所示：

$accordionDt = $authorityPageAccordionDataTable->with([
    'authorityPage' => $authorityPage
])->html();

$authorityContentDt = $authorityPageGuideContentDataTable->with([
    'authorityPage' => $authorityPage
])->html();

return view('pages.authority-pages.show', [
    'authorityPage' => $authorityPage,
    'blogPosts' => $blogPosts,
    'tours' => $tours,
    'destinations' => $destinations,
    'keywordIntents' => $keywordIntents,
    'authorityContentDt' => $authorityContentDt,
    'accordionDt' => $accordionDt
]);

现在，在您的视图中，您可以使用

{{$authorityContentDt->table()}}

和

{{$authorityContentDt->scripts()}}

来包含数据表 HTML 和脚本。