Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI 
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)
{
//
}
}
