Get 2024 Templates Mega Bundle!19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets
Get for 99$

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");
}
}
<pre lang="php"></pre>


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)


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



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)
{
//
}
}


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  :(