I encountered an issue while trying to fetch data into a datatable in Laravel. I am receiving an error message stating "Uncaught ReferenceError: $ is not defined" on the console of the page. Is there a solution to resolve this problem?
index.blade.php
@extends('layouts.app')
@section('header')
<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
@endsection
@section('content')
<div class="container">
@if(session("alert"))
<div class="alert alert-{{ session(`alert-style`) }}">{{session("alert")}}</div>
@endif
<div class="row justify-content-center">
<div class="col-md-8">
<div class="mt-2 mb-2">
<table id="productTable" class="table table-striped" style="width:100%">
<thead>
<tr>
<th>Title</th>
<th>Description</th>
<th>Price</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
@endsection
@section('footer')
<component :is="'script'">
$(function () {
var table = $('#productTable').DataTable({
processing: true,
serverSide: true,
ajax: "{{ route('product.getData') }}",
columns: [
{data: 'title', name: 'title'},
{data: 'description', name: 'description'},
{data: 'price', name: 'price'},
{
data: 'action',
name: 'action',
orderable: true,
searchable: true
},
]
});
});
</component>
@endsectionProductController.php
class ProductController extends Controller
{
public function getData(Request $request)
{
$x = Product::select('id', 'title', 'description', 'price');
return Datatables($x)
->addColumn('edit', function($x){
return '<a href="'.route('product.edit',
['productId' => $x->id]).'">Edit</a>';})
->addColumn('delete', function($x){
return '<a href="'.route('product.delete',
['productId' => $x->id]).'">Delete</a>';})
->rawColumns(['edit','delete'])
->make(true);
}
}web.php which specifies page routes is below.
Route::get('/product', [App\Http\Controllers\ProductController::class, 'index'])->name('product.index');
Route::post('/getData', [App\Http\Controllers\ProductController::class, 'getData'])->name('product.getData');