New Metronic Docs!Added Integration Docs with Starter Kits Apps for Laravel, Laravel Livewire, Angular, Vue, Symfony, Blazor Server, Django & Flask & more
Browse Docs 
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
<pre lang="php"></pre>
<?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>
Replies (2)
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
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)
{
//
}
}
