我构建了一个简单的网络应用程序。我更喜欢使用 Yajra 数据表。我的本地计算机上一切正常。然后我将所有文件上传到共享主机。
经过几分钟的vite挣扎，终于完成了申请工作。不管怎样，在测试页面后，我注意到带有 DataTable 的页面没有加载。 AJAX 加载器（表格中间的蓝点）始终进行动画处理，而 Datatable 从不加载数据行。
我已使用浏览器的开发人员工具检查了该页面。控制台面板没有错误，也没有警告。我可以在“响应”选项卡中看到数据已从数据库服务器正确读取。但它没有呈现为表格行。
我认为 Vite 或任何其他 javascript 文件有问题。我不明白这可能是什么问题？在我看来，这是一个 .js 文件问题，但我不确定。
我觉得没必要共享控制器和视图文件，无论如何让我共享它们：
userlist.blade.php
@extends('layouts.app');
@section('content')
<h2 class="mt-2">Users</h2>
{{ $dataTable->table() }}
@endsection
@push('scripts')
{{ $dataTable->scripts(attributes: ['type' => 'module']) }}
@endpush
用户数据表.php
<?php
namespace App\DataTables;
use App\Models\User;
use Illuminate\Database\Eloquent\Builder as QueryBuilder;
use Yajra\DataTables\EloquentDataTable;
use Yajra\DataTables\Html\Builder as HtmlBuilder;
use Yajra\DataTables\Html\Button;
use Yajra\DataTables\Html\Column;
use Yajra\DataTables\Services\DataTable;
class UsersDataTable extends DataTable
{
/**
* Build the DataTable class.
*
* @param QueryBuilder $query Results from query() method.
*/
public function dataTable(QueryBuilder $query): EloquentDataTable
{
return (new EloquentDataTable($query))
->addColumn('Edit User', function ($row) {
return '<a href="/users/edit/' . $row->id . '" class="update btn btn-info btn-sm"><i class="text-white fas fa-pencil"></i></a>';
})->setRowId('id')
->rawColumns(['Edit User']);
}
/**
* Get the query source of dataTable.
*/
public function query(User $model): QueryBuilder
{
return $model->newQuery();
}
/**
* Optional method if you want to use the html builder.
*/
public function html(): HtmlBuilder
{
return $this->builder()
->setTableId('users-table')
->columns($this->getColumns())
->minifiedAjax()
//->dom('Bfrtip')
->orderBy(1)
->selectStyleSingle()
->buttons([
Button::make('excel'),
Button::make('csv'),
// Button::make('pdf'),
Button::make('print'),
Button::make('reset'),
Button::make('reload')
]);
}
/**
* Get the dataTable columns definition.
*/
public function getColumns(): array
{
return [
Column::make('id'),
Column::make('name'),
Column::make('email'),
Column::make('phone'),
Column::make('status'),
Column::make('role'),
Column::computed('Edit User')
->exportable(false)
->printable(false)
->addClass('text-center'),
];
}
/**
* Get the filename for export.
*/
protected function filename(): string
{
return 'Users_' . date('YmdHis');
}
public function index(UsersDataTable $dataTable)
{
return $dataTable->render('userlist');
}
}
资源/js/bootstrap.js
import 'bootstrap';
资源/js/app.js
import './bootstrap';
import 'laravel-datatables-vite';
资源/sass/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';
资源/视图/布局/app.blade.php
...
<!-- Scripts -->
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
...
我本地电脑上的浏览器页面底部有一段javascript代码片段：
<script type="module">
$(function(){window.LaravelDataTables=window.LaravelDataTables||{};window.LaravelDataTables["users-table"]=$("#users-table").DataTable({"serverSide":true,"processing":true,"ajax":{"url":"http:\/\/localhost:8000\/admin\/users","type":"GET","data":function(data) {
for (var i = 0, len = data.columns.length; i < len; i++) {
if (!data.columns[i].search.value) delete data.columns[i].search;
if (data.columns[i].searchable === true) delete data.columns[i].searchable;
if (data.columns[i].orderable === true) delete data.columns[i].orderable;
if (data.columns[i].data === data.columns[i].name) delete data.columns[i].name;
}
delete data.search.regex;}},"columns":[{"data":"id","name":"id","title":"Id","orderable":true,"searchable":true},{"data":"name","name":"name","title":"Name and Surname","orderable":true,"searchable":true},{"data":"email","name":"email","title":"E-mail Address","orderable":true,"searchable":true},{"data":"phone","name":"phone","title":"Telephone Number","orderable":true,"searchable":true},{"data":"status","name":"status","title":"Activated","orderable":true,"searchable":true},{"data":"role","name":"role","title":"Role","orderable":true,"searchable":true},{"data":"account_creation_date","name":"account_creation_date","title":"Account Creation Date","orderable":true,"searchable":true},{"data":"Edit","name":"Edit","title":"Edit","orderable":false,"searchable":false,"className":"text-center"}],"order":[[1,"desc"]],"select":{"style":"single"},"buttons":[{"extend":"excel"},{"extend":"csv"},{"extend":"print"},{"extend":"reset"},{"extend":"reload"}]});});
</script>
此处
url"url":"http:\/\/localhost:8000\/admin\/users"...
"url":"http:\/\/localhost:8000\/admin\/users"
...
但是服务器端的脚本有所不同：
<script type="module">$(function(){window.LaravelDataTables=window.LaravelDataTables||{};window.LaravelDataTables["users-table"]=$("#users-table").DataTable({"serverSide":true,"processing":true,"ajax":{"url":"http:\/\/mydomain.com\/admin\/users\?admin%2Fusers=","type":"GET","data":function(data) {
//remaining part is same
...
</script>
在
urlhttp://mydomain.com/admin/users?admin%2Fusers=
Yajra 要求之一是 Jquery DataTables。
确保您已安装它并且文件可以访问。例如，这是我在刀片文件中配置的内容：
@section('js')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.css" />
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.js"></script>
{{ $dataTable->scripts(attributes: ['type' => 'module']) }}
@endsection