Laravel-datatables: Datentabelle zeigt keine Daten an

Erstellt am 3. Feb. 2020  ·  15Kommentare  ·  Quelle: yajra/laravel-datatables

Verwenden Sie Laravel 6.5.2, PHP 7.2.26 (versuchen Sie auch 7.3.3) und "yajra / laravel-datatables": "v1.5.0"
Die Datentabelle wird angezeigt, enthält jedoch keine Daten.
Model Apartment enthalten Daten.

Routen

Route::resource('apartments', 'ApartmentController')

Regler

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

Datierbarer Dienst

<?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.
     *
     * <strong i="18">@param</strong> mixed $query Results from query() method.
     * <strong i="19">@return</strong> DataTableAbstract
     */
    public function dataTable($query)
    {
        return datatables()
            ->eloquent($query)
            ->addColumn('action', 'apartment.action');
    }

    /**
     * Get query source of dataTable.
     *
     * <strong i="20">@param</strong> Apartment $model
     * <strong i="21">@return</strong> Builder
     */
    public function query(Apartment $model)
    {
        return $model->newQuery();
    }

    /**
     * Optional method if you want to use html builder.
     *
     * <strong i="22">@return</strong> \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.
     *
     * <strong i="23">@return</strong> 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.
     *
     * <strong i="24">@return</strong> string
     */
    protected function filename()
    {
        return 'Apartment_' . date('YmdHis');
    }
}

Aussicht

@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>
<strong i="7">@endsection</strong>

@push('scripts')
    <script src="{{ asset('vendor/datatables/buttons.server-side.js') }}"></script>
    {{ $dataTable->scripts() }}
<strong i="8">@endpush</strong>

Ergebnis im 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>
question

Hilfreichster Kommentar

Zunächst einmal entschuldigen Sie mein Englisch
Ich habe das gleiche Problem und finde eine Lösung für mich
Wenn ich benutze
@section ('content')
{{$ dataTable-> table ()}}
@endsection

@push ('Skripte')
{{$ dataTable-> scripts ()}}
@endpush

Es funktioniert nicht. Keine Daten/

Aber wenn ich @push und @scripts nicht benutze, funktioniert es gut. So was

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

Ich weiß nicht, ob das richtig ist, aber diese Arbeit.

In bottomstrap.js füge ich Code wie folgt ein

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

Und es funktioniert gut

Alle 15 Kommentare

Vielleicht ein Tippfehler im Index?

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

Nein .... ich mache das zum Test und habe es versehentlich kopiert.

Ihr Code sieht gut aus. Irgendwelche Fehler auf der Konsole?

Kein Fehler irgendwo ...

$ dataTable-> scripts () generieren 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>

Wenn ich dd ($ dataTable-> ajax ()) setze; in Controller vor der Rückkehr, dann hat Illuminate \ HttpJsonResponse mit vollständigen Daten.

Zunächst einmal entschuldigen Sie mein Englisch
Ich habe das gleiche Problem und finde eine Lösung für mich
Wenn ich benutze
@section ('content')
{{$ dataTable-> table ()}}
@endsection

@push ('Skripte')
{{$ dataTable-> scripts ()}}
@endpush

Es funktioniert nicht. Keine Daten/

Aber wenn ich @push und @scripts nicht benutze, funktioniert es gut. So was

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

Ich weiß nicht, ob das richtig ist, aber diese Arbeit.

In bottomstrap.js füge ich Code wie folgt ein

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

Und es funktioniert gut

Und ich habe es auch bemerkt, wenn ich benutze

Ich hatte auch das gleiche Problem. Ich habe es gelöst, indem ich @Stack ('Skripte') zu meinem Layout (app.blade) hinzugefügt habe. Wie so

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

Es funktioniert immer noch nicht mit mir, ich habe alles oben getan und es gibt immer noch keine Daten, die zeigen, dass mir jemand hilft

Was ich getan habe, damit es funktioniert (Laravel 7):

Bearbeiten Sie resources/js/bootstrap.js und fügen Sie Folgendes hinzu:

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

Bearbeiten Sie resources/scss/app.scss und fügen Sie Folgendes hinzu:

// DataTables
<strong i="12">@import</strong> "~datatables.net-bs4/css/dataTables.bootstrap4.css";
<strong i="13">@import</strong> "~datatables.net-buttons-bs4/css/buttons.bootstrap4.css";

Dann benutze

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

Verschieben Sie das Skript nach unten

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

Ich arbeite immer noch nicht an mir

I FIXED-Skripte werden aufgrund eines Tippfehlers nicht geladen
Das Problem befindet sich am Ende der Standardlayoutdatei mit @yield('footer_scripts') aber die Datei table.blade hat @section('footerscripts')
Ich hoffe, einige andere würden es besser im Detail erklären.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen