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

<?php

namespace 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>

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)

model:

<?php

namespace 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

<?php

namespace 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>
@endsection

Thanks

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(