Laravel 12集成Yajra DataTables无数据渲染且无AJAX请求问题

在Laravel 12项目中集成Yajra DataTables后，表格仅渲染列名，无数据显示，且浏览器网络面板中无任何AJAX请求。以下是相关配置信息：

配置详情 #

Composer依赖 #

composer.json中声明的依赖：

"yajra/laravel-datatables": "^12"

NPM依赖 #

package.json中的开发依赖：

"devDependencies": {
    "laravel-datatables-vite": "^0.6.1",
     ...
}

样式文件（app.scss） #

// Fonts
@import url('https://fonts.bunny.net/css?family=Nunito');
// Variables
@import 'variables';

// Bootstrap
@import 'bootstrap/scss/bootstrap';

// DataTables
@import 'bootstrap-icons/font/bootstrap-icons.css';
@import "datatables.net-bs5/css/dataTables.bootstrap5.min.css";
@import "datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css";
@import 'datatables.net-select-bs5/css/select.bootstrap5.css';

JS文件（app.js） #

import 'laravel-datatables-vite';

控制器代码 #

public function index(UsersDataTable $dataTable)
{
    return $dataTable->render('users.index');
} 

UsersDatatable.php代码 #

public function dataTable(QueryBuilder $query): EloquentDataTable
{
    return (new EloquentDataTable($query))
        ->setRowId('id');
}

public function query(User $model): QueryBuilder
{
    return $model->newQuery()->with('roles');
}

public function html(): HtmlBuilder
{
    return $this->builder()
        ->setTableId('users-table')
        ->columns($this->getColumns())
        ->minifiedAjax()
        ->orderBy(1)
        ->selectStyleSingle()
        ->buttons([
            Button::make('excel'),
            Button::make('csv'),
            Button::make('pdf'),
            Button::make('print'),
            Button::make('reset'),
            Button::make('reload')
        ]);
}

public function getColumns(): array
{
    return [
        Column::make('id')->title('ID'),
        Column::make('name')->title('Name'),
        Column::make('email')->title('Email'),
        Column::computed('roles')->title('Roles'),
        Column::make('created_at')->title('Created At'),
        Column::make('updated_at')->title('Updated At'),
    ];
}

视图文件（index.blade.php） #

<x-layouts.app>
    <div class="container">
        <h2>User Management</h2>
        {{ $dataTable->table() }}
    </div>
</x-layouts.app>

@push('scripts')
    {{ $dataTable->scripts() }}
@endpush

问题现象 #

• 表格仅显示列名，无数据加载
• 浏览器网络面板无任何AJAX请求

已尝试操作 #

• 确认布局文件中存在@stack('scripts')指令
• 检查浏览器控制台无JavaScript错误
• 执行php artisan cache:clear、php artisan view:clear等命令清理Laravel缓存

内容的提问来源于stack exchange，提问作者Zaid Malek