laravel-datatables: Datatable not showing data
Use Laravel 6.5.2, PHP 7.2.26 (also try 7.3.3) and “yajra/laravel-datatables”: “v1.5.0” The data table appears but doesn’t have any data. Model Apartment contain data.
Routes
Route::resource('apartments', 'ApartmentController')
Controller
<?php
namespace App\Http\Controllers;
use App\Apartment;
use App\DataTables\ApartmentDataTable;
use Yajra\DataTables\Services\DataTable;
class ApartmentController extends Controller
{
public function qindex(ApartmentDataTable $dataTable)
{
return $dataTable->render('apartments.index');
}
}
Datatable Service
<?php
namespace App\DataTables;
use App\Apartment;
use Illuminate\Database\Eloquent\Builder;
use Yajra\DataTables\DataTableAbstract;
use Yajra\DataTables\Html\Button;
use Yajra\DataTables\Html\Column;
use Yajra\DataTables\Html\Editor\Editor;
use Yajra\DataTables\Html\Editor\Fields;
use Yajra\DataTables\Services\DataTable;
class ApartmentDataTable extends DataTable
{
/**
* Build DataTable class.
*
* @param mixed $query Results from query() method.
* @return DataTableAbstract
*/
public function dataTable($query)
{
return datatables()
->eloquent($query)
->addColumn('action', 'apartment.action');
}
/**
* Get query source of dataTable.
*
* @param Apartment $model
* @return Builder
*/
public function query(Apartment $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('apartment-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::computed('action')
->exportable(false)
->printable(false)
->width(60)
->addClass('text-center'),
Column::make('id'),
Column::make('address'),
Column::make('created_at'),
Column::make('updated_at'),
];
}
/**
* Get filename for export.
*
* @return string
*/
protected function filename()
{
return 'Apartment_' . date('YmdHis');
}
}
View
@extends('layouts.app')
@section('content')
<div class="container py-4">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card">
<div class="card-header">Table</div>
<div class="card-body">
{{ $dataTable->table() }}
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
@push('scripts')
<script src="{{ asset('vendor/datatables/buttons.server-side.js') }}"></script>
{{ $dataTable->scripts() }}
@endpush
Result in browser
<script type="text/javascript">
(function(window,$){window.LaravelDataTables=window.LaravelDataTables||{};window.LaravelDataTables["apartment-table"]=$("#apartment-table").DataTable({"serverSide":true,"processing":true,"ajax":{"url":"","type":"GET","data":function(data) {
for (var i = 0, len = data.columns.length; i < len; i++) {
if (!data.columns[i].search.value) delete data.columns[i].search;
if (data.columns[i].searchable === true) delete data.columns[i].searchable;
if (data.columns[i].orderable === true) delete data.columns[i].orderable;
if (data.columns[i].data === data.columns[i].name) delete data.columns[i].name;
}
delete data.search.regex;}},"columns":[{"data":"action","name":"action","title":"Action","orderable":false,"searchable":false,"width":60,"className":"text-center"},{"data":"id","name":"id","title":"Id","orderable":true,"searchable":true},{"data":"address","name":"address","title":"Address","orderable":true,"searchable":true},{"data":"created_at","name":"created_at","title":"Created At","orderable":true,"searchable":true},{"data":"updated_at","name":"updated_at","title":"Updated At","orderable":true,"searchable":true}],"dom":"Bfrtip","order":[[1,"desc"]],"buttons":[{"extend":"create"},{"extend":"export"},{"extend":"print"},{"extend":"reset"},{"extend":"reload"}]});})(window,jQuery);
</script>
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 1
- Comments: 19 (2 by maintainers)
First of all sorry for my english I have same problem, and find solution for me If i use @section(‘content’) {{ $dataTable->table() }} @endsection
@push(‘scripts’) {{ $dataTable->scripts() }} @endpush
It’s doesn’t work. No data/
But when i don’t use @push and @scripts it’s work fine. Like this
@section(‘content’) {{ $dataTable->table() }} {{ $dataTable->scripts() }} @endsection
I don’t know is this right, but this work.
In bottstrap.js i paste code like this
`try { window.Popper = require(‘popper.js’).default; window.$ = window.jQuery = require(‘jquery’);
} catch (e) {}`
in app.blade.php
And it’s work fine
@3s777 Thanks for the tip! The workaround really helped:
And I also noticed, when I use
<script src="{{ asset('js/app.js') defer}}"></script>it’s default laravel setup, I get errors in console that jQuery and DataTables not defined
if I use <script src="{{ asset('js/app.js')}}"></script> or <script src="{{ mix('js/app.js')}}"></script> errors in console empty, but data don’t showing, it’s don’t work
and if I delete defer, delete @push and delete @scripts it’s begin work