我正在尝试在我的 Laravel 9 项目中添加数据表（我使用 Vite）。
我注意到它不起作用，因为我收到这两个错误：
第一个错误：
$ 未定义
第二个错误：
jQuery 未定义
这是我的完整代码：
bootstrap.js
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
require('datatables.net');
} catch (e) {}
app.js
import './../../node_modules/datatables.net/js/jquery.dataTables';
查看
<table id="tableclient" class="table table-bordered table-striped table-hover sizethtd">
<tr>
<th class="">Name</th>
<th class="">Email</th>
<th class="">Address</th>
<th class="">Action</th>
</tr>
@foreach ($clients as $client)
<tr>
<td><a href="{{route('client.show' , compact('client'))}}" class="text-muted fw-bold paddingLink">{{ $client->name }}</a></td>
<td class=""><a href= "mailto:{{ $client->email }}" class="text-muted paddingLink fw-bold">{{ $client->email }}</a></td>
<td class="">{{ $client->address }}</td>
<td>
<a class="btn btn-info" href="{{route('project.create', compact('client'))}}">Add</a>
</td>
</tr>
@endforeach
</table>
<script>
$(function () {
$('#tableclient').DataTable({
processing: true,
serverSide: false
});
});
</script>
vite.cofig.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js',
],
refresh: true,
}),
],
});
有人可以帮助我吗？
更新
我通过命令安装了jquery
npm i jquery
在 app.js 中，我与数据表一起导入了以下行：
import './../../node_modules/jquery/src/css';
错误仍然存在
你只是缺少 jQuery。添加 jQuery 有多种方法，一种快速但不是 idael 方法的方法是通过 cdn 添加
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script您似乎缺少
Jquery您可以使用
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
或者通过手动安装：
npm install jquery
或
yarn add jquery
在您的
bootstrap.jsapp.jswindow.$ = window.jQuery = require('jquery')
然后在您的应用程序中需要
js/app.js先添加cdn
<!-- jQuery -->
查看文件
<table id="all_admin_donation" class="table mb-0">
<thead class="text-gray fs-12">
<tr>
<th class="pl-0">{{ translate('Id')}}</th>
<th data-breakpoints="md">{{ translate('Category')}}</th>
<th data-breakpoints="md">{{ translate('Account Type')}}</th>
<th data-breakpoints="md">{{ translate('Amount')}}</th>
<th data-breakpoints="md">{{ translate('Phone')}}</th>
<th data-breakpoints="md">{{ translate('Email')}}</th>
<th data-breakpoints="md">{{ translate('Name')}}</th>
<th data-breakpoints="md">{{ translate('Pan No')}}</th>
<th data-breakpoints="md">{{ translate('Status')}}</th>
<th data-breakpoints="md">{{ translate('Created at')}}</th>
<th data-breakpoints="md" style="width:190px;">{{ translate('Action')}}</th>
</tr>
</thead>
<tbody class="fs-14">
</tbody>
</table>
JS
$(document).ready(function(){
all_admin_donation();
});
function all_admin_donation(){
if ($.fn.DataTable.isDataTable('#all_admin_donation')){
$('#all_admin_donation').DataTable().destroy();
}
$('#all_admin_donation').DataTable({
"processing" : true,
"serverSide" : true,
"ajax" : {
"url" : "{{route('all_admin_donation_data')}}",
"type" : "POST",
"dataType" : "JSON",
"headers": {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
},
"columns" : [
{"data" : "id"},
{"data" : "category_id"},
{"data" : "account_type"},
{"data" : "amount"},
{"data" : "phone"},
{"data" : "email"},
{"data" : "name"},
{"data" : "pan"},
{"data" : "status"},
{"data" : "created_at"},
{"data" : "action"},
]
});
}
在控制器中 公共函数 get_all_admin_donation_data(请求 $request){ $columns = ['id', 'category_id', 'account_type', '金额', '电话', '电子邮件', '姓名', '平移', '状态', 'created_at']; $limit = $request->input('长度'); $start = $request->input('start'); $order = $columns[$request->input('order.0.column')]; $dir = $request->input('order.0.dir'); // 记录总数 $totalData = 捐赠::count(); $totalFiltered = $totalData； // 查询捐款情况 $query = Donation::select(['donation.id', 'donation_categories.category_name', 'donation.account_type', 'donation.amount', 'donation.phone', 'donation.email', 'donation.name' , 'donation.pan', 'donation.status','donation.created_at'])->join('donation_categories','donation.category_id','=','donation_categories.id'); // 如果存在则应用搜索过滤器 if (!empty($request->input('search.value'))) { $search = $request->input('search.value'); $query->where(函数($q) use ($search) { $q->where('donation.id', 'LIKE', "%{$search}%") ->orWhere('donation_categories.category_name', 'LIKE', "%{$search}%") ->orWhere('donation.account_type', 'LIKE', "%{$search}%") ->orWhere('捐赠.金额', 'LIKE', "%{$search}%") ->orWhere('捐赠.电话', 'LIKE', "%{$search}%") ->orWhere('捐赠.email', 'LIKE', "%{$search}%") ->orWhere('捐赠.名称', 'LIKE', "%{$search}%") ->orWhere('donation.pan', 'LIKE', "%{$search}%") ->orWhere('donation.created_at', 'LIKE', "%{$search}%") // ->orWhere('donation.status', 'LIKE', "%{$search}%"); ->orWhere(函数($query) use ($search) { if (stripos($search, '付费') !== false) { $query->where('donation.status', 'LIKE', '%1%'); } elseif (stripos($search, '待定') !== false) { $query->where('捐赠.status', 'LIKE', '%0%'); } }); }); // 更新过滤后的数据计数 $totalFiltered = $query->count(); } // 应用排序、限制和偏移 $donations = $query->orderBy($order, $dir) ->偏移量（$开始） ->限制（$限制） ->获取(); // 为DataTables准备数据 $数据= []; foreach（$donation 为 $donation）{ $nestedData['id'] = $donation->id; $nestedData['category_id'] = $donation->category_name; $nestedData['account_type'] = $donation->account_type; $nestedData['amount'] = $donation->amount; $nestedData['phone'] = $donation->phone; $nestedData['email'] = $donation->email; $nestedData['name'] = $donation->name; $nestedData['pan'] = $donation->pan; $nestedData['status'] = $donation->status == 0 ？ '待处理': '已付款'; $nestedData['created_at'] = $donation->created_at->format('d-m-y H:i');
// Example action column
$nestedData['action'] = '<a target="_blank" class="btn btn-soft-secondary-base btn-icon btn-circle btn-sm hov-svg-white mt-2 mt-sm-0" href="'.url('view_donation_receipt/'.$donation->id).'" title="View Invoice">
<i class="las la-eye"></i>
</a>';
if($donation->status){
$nestedData['action'] .= '<a class="btn btn-soft-secondary-base btn-icon btn-circle btn-sm hov-svg-white mt-2 mt-sm-0" href="'.url('donation_receipt/'.$donation->id).'" title="Download Invoice">
<i class="las la-download" style="color: #f3af3d;">
</a>';
}
$data[] = $nestedData;
}
// Return response in JSON format
$json_data = [
"draw" => intval($request->input('draw')),
"recordsTotal" => intval($totalData),
"recordsFiltered" => intval($totalFiltered),
"data" => $data
];
return response()->json($json_data);
}