Datatable not showing data

[ZAZmaster]

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>

[yajra]

Maybe a typo on index?

// should be index
public function qindex(ApartmentDataTable $dataTable)

[ZAZmaster]

No.... I do this for test and accidentally copied.

[yajra]

Your code looks fine. Any errors on console?

[ZAZmaster]

No error anywhere...

[ZAZmaster]

$dataTable->scripts() generate code:

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

If I put dd($dataTable->ajax()); in Controller before return, then has Illuminate\Http\JsonResponse with full data.

[3s777]

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');

require('bootstrap');
require('datatables.net-bs4');
require('datatables.net-buttons-bs4');

} catch (e) {}`

in app.blade.php

    <script src="{{ asset('js/app.js') }}"></script>
    <script src="{{ asset('vendor/datatables/buttons.server-side.js') }}"></script>

And it's work fine

[3s777]

And I also noticed, when I use

it's default laravel setup, I get errors in console that jQuery and DataTables not defined

if I use or 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

[ZAZmaster]

@3s777 Thanks for the tip! The workaround really helped:

@section('content')
{{ $dataTable->table() }}
{{ $dataTable->scripts() }}
@endsection

[BRobertORT]

Hi, i'm using adminlte and my workaround is

instead of @Push('scripts') {{ $dataTable->scripts() }} @endpush

use @Push('js') {{ $dataTable->scripts() }} @endpush

[rizkhal]

I use https://getstisla.com/getting-started and i have same problem. I think this is a problem with templating not on yajra packages or datatable because the console isn't displaying errors.

[EvansPeazy]

I also had the same issue. i resolved it by adding @Stack('scripts') to my layout (app.blade). Like so

<script src="{{ asset('js/app.js') }}"></script>
@stack('scripts')

[EslamShaban]

it's still not working with me , i did every thing above and still no data showing, there are any one help me

[zijld]

What I did to make it work (Laravel 7):

Edit resources/js/bootstrap.js and add the following:

require('bootstrap');
require('datatables.net-bs4');
require('datatables.net-buttons-bs4');

Edit resources/scss/app.scss and add the following:

// DataTables
@import "~datatables.net-bs4/css/dataTables.bootstrap4.css";
@import "~datatables.net-buttons-bs4/css/buttons.bootstrap4.css";

Then use

<script src="{{ mix('js/app.js') }}"></script>
// instead of 
<script src="{{ asset('js/app.js') }}"></script>
<script src="{{ asset('vendor/datatables/buttons.server-side.js') }}"></script>

Move script to the bottom

@stack('scripts')
</body>
</html>

[wilsilscar]

Still not working on me

[afsal9]

I FIXED scripts is not loading because of a typo the issue is at the bottom of default layout file has @yield('footer_scripts') but the table.blade file has @section('footerscripts') hope some else would better explain in details.

[parsasamandi]

public function list() {
        $dataTable = new ApartmentDataTable();

        $vars['apartmentTable'] = $dataTable->html();

        return view('apartment.index', $vars);
}

[mubahood]

SOLUTION 1 Look for this file in your project

vendor/datatables/buttons.server-side.js

The copy it and put it in your assets public folder and then make sure you include it as a scribe before

{{ $dataTable->scripts() }}

so, it should be like this

<script src="{{ url('/') }}/assets/js/buttons.server-side.js"></script>
{{ $dataTable->scripts() }}

and hopefully it will be fixed.

SOLUTION 2 Remove buttons. On your build method in the datatable class, remove buttons by adding something like this

 ->parameters([
        'dom' => 'Bfrtip',
        'buttons' => [],
    ]);

So, the final thing should look like this

public function html()
{
    return $this->builder()
                ->setTableId('users-table')
                ->columns($this->getColumns())
                ->minifiedAjax()
                ->dom('Bfrtip')
                ->orderBy(1)
                -->parameters([
                    'dom' => 'Bfrtip',
                    'buttons' => [],
                ]);
}

CONCLUSION If you still get an error, go to inspect and see if there is any warning. All the best!

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been inactive for 7 days since being marked as stale.