table is not loading
i'm using metronic in laravel and i'm getting this error that is
'Uncaught TypeError: $(...).DataTable is not a function'
after making everything exactly like yarja documentation like
this is the data table
<?phpnamespace App\DataTables;
use App\Models\Proprties;
use Yajra\DataTables\Html\Button;
use Yajra\DataTables\Html\Column;
use Yajra\DataTables\Services\DataTable;
use Yajra\DataTables\Html\Editor\Fields;
use Yajra\DataTables\Html\Editor\Editor;
class ProprtiesDataTable extends DataTable
{
/**
* Build DataTable class.
*
* @param mixed $query Results from query() method.
* @return \Yajra\DataTables\DataTableAbstract
*/
public function dataTable($query)
{
return datatables()
->eloquent($query)
->addColumn('action', 'proprties.action');
}
/**
* Get query source of dataTable.
*
* @param \App\Models\Proprty $model
* @return \Illuminate\Database\Eloquent\Builder
*/
public function query(Proprty $model)
{
return $model->newQuery();
}
/**
* Optional method if you want to use html builder.
*
* @return \Yajra\DataTables\Html\Builder
*/
public function html()
{
return $this->builder()
->setTableId('proprties-table')
->columns($this->getColumns())
->minifiedAjax()
->dom('Bfrtip')
->orderBy(1)
->buttons(
Button::make('create'),
Button::make('export'),
Button::make('print'),
Button::make('reset'),
Button::make('reload')
);
}
/**
* Get columns.
*
* @return array
*/
protected function getColumns()
{
return [
Column::make('id')->title('Log ID'),
Column::make('owneruser'),
Column::make('name'),
Column::make('refnumber'),
Column::make('refnumber'),
];
}
/**
* Get filename for export.
*
* @return string
*/
protected function filename()
{
return 'Proprties_' . date('YmdHis');
}
}
my index blade:
<x-base-layout> <!--begin::Card-->
<div class="card">
<!--begin::Card body-->
<div class="card-body pt-6">
<!--begin::Table-->
{{ $dataTable->table() }}
<!--end::Table-->
{{-- Inject Scripts --}}
@section('scripts')
{{ $dataTable->scripts() }}
@endsection
</div>
<!--end::Card body-->
</div>
<!--end::Card-->
</x-base-layout>
Replies (2)
model:
<?phpnamespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Proprties extends Model
{
use HasFactory;
protected $table = 'proprties';
protected $fillable = [
'owneruser',
'name',
'refnumber',
'rooms',
'bathrooms',
'levels',
'area',
'furnished',
'type',
'status',
'buildingnum',
'road',
'block',
'state',
'country',
'coor1',
'coor2',
'ownername',
'email',
'mobile1',
'mobile2',
'price',
'currency',
'neg',
'unittype'
];
}
Controller
<?phpnamespace App\Http\Controllers;
use App\Models\Proprties;
use Illuminate\Http\Request;
use App\DataTables\ProprtiesDataTable;
use Spatie\Activitylog\Models\Activity;
use DataTables;
class ProprtiesController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index(ProprtiesDataTable $dataTable)
{
//
return $dataTable->render('pages.proprty.index');
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
//
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
//
}
/**
* Display the specified resource.
*
* @param \App\Models\Proprties $proprties
* @return \Illuminate\Http\Response
*/
public function show(Proprties $proprties)
{
//
}
/**
* Show the form for editing the specified resource.
*
* @param \App\Models\Proprties $proprties
* @return \Illuminate\Http\Response
*/
public function edit(Proprties $proprties)
{
//
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param \App\Models\Proprties $proprties
* @return \Illuminate\Http\Response
*/
public function update(Request $request, Proprties $proprties)
{
//
}
/**
* Remove the specified resource from storage.
*
* @param \App\Models\Proprties $proprties
* @return \Illuminate\Http\Response
*/
public function destroy(Proprties $proprties)
{
//
}
}
Hi Mohammed Abutaki
In the pages config, have you imported the datatable plugin file?
For example in this file; config/global/pages.php
'log' => array(
'audit' => array(
'title' => 'Audit Log',
'assets' => array(
'custom' => array(
'css' => array(
'plugins/custom/datatables/datatables.bundle.css',
),
'js' => array(
'plugins/custom/datatables/datatables.bundle.js',
),
),
),
),You can also import these 2 plugins files into the blade.
@section('styles')
<link href="{{ asset('assets/plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css"/>
@endsection
@section('scripts')
<script src="{{ asset('assets/plugins/custom/datatables/datatables.bundle.js') }}" type="text/javascript"></script>
@endsectionThanks
