Laravel-datatables: Datatable tidak menampilkan data

Dibuat pada 3 Feb 2020  ·  15Komentar  ·  Sumber: yajra/laravel-datatables

Gunakan Laravel 6.5.2, PHP 7.2.26 (juga coba 7.3.3) dan "yajra / laravel-datatables": "v1.5.0"
Tabel data muncul tetapi tidak memiliki data apa pun.
Model Apartemen berisi data.

Rute

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

Kontroler

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

Layanan Datatable

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

Melihat

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

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

Komentar yang paling membantu

Pertama-tama maaf untuk bahasa Inggris saya
Saya memiliki masalah yang sama, dan menemukan solusi untuk saya
Jika saya menggunakan
@bagian ('konten')
{{$ dataTable-> table ()}}
@endeksi

@push ('skrip')
{{$ dataTable-> skrip ()}}
@dpush

Tidak berhasil. Tidak ada data/

Tetapi ketika saya tidak menggunakan @push dan @scripts, itu berfungsi dengan baik. Seperti ini

@bagian ('konten')
{{$ dataTable-> table ()}}
{{$ dataTable-> skrip ()}}
@endeksi

Saya tidak tahu apakah ini benar, tetapi pekerjaan ini.

Di bottstrap.js saya menempelkan kode seperti ini

`coba {
window.Popper = membutuhkan ('popper.js'). default;
window. $ = window.jQuery = membutuhkan ('jquery');

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

} tangkap (e) {} `

di app.blade.php

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

Dan itu bekerja dengan baik

Semua 15 komentar

Mungkin salah ketik pada indeks?

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

Tidak .... Saya melakukan ini untuk tes dan tidak sengaja disalin.

Kode Anda terlihat bagus. Ada kesalahan di konsol?

Tidak ada kesalahan di mana pun ...

$ dataTable-> scripts () menghasilkan kode:

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

Jika saya meletakkan dd ($ dataTable-> ajax ()); di Controller sebelum kembali, lalu memiliki Illuminate \ HttpJsonResponse dengan data lengkap.

Pertama-tama maaf untuk bahasa Inggris saya
Saya memiliki masalah yang sama, dan menemukan solusi untuk saya
Jika saya menggunakan
@bagian ('konten')
{{$ dataTable-> table ()}}
@endeksi

@push ('skrip')
{{$ dataTable-> skrip ()}}
@dpush

Tidak berhasil. Tidak ada data/

Tetapi ketika saya tidak menggunakan @push dan @scripts, itu berfungsi dengan baik. Seperti ini

@bagian ('konten')
{{$ dataTable-> table ()}}
{{$ dataTable-> skrip ()}}
@endeksi

Saya tidak tahu apakah ini benar, tetapi pekerjaan ini.

Di bottstrap.js saya menempelkan kode seperti ini

`coba {
window.Popper = membutuhkan ('popper.js'). default;
window. $ = window.jQuery = membutuhkan ('jquery');

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

} tangkap (e) {} `

di app.blade.php

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

Dan itu bekerja dengan baik

Dan saya juga memperhatikan, saat saya menggunakan

Saya juga memiliki masalah yang sama. saya menyelesaikannya dengan menambahkan @Stack ('scripts') ke layout saya (app.blade). Seperti itu

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

Itu masih tidak berfungsi dengan saya, saya melakukan semua hal di atas dan masih tidak ada data yang ditampilkan, ada yang membantu saya

Apa yang saya lakukan untuk membuatnya berhasil (Laravel 7):

Edit resources/js/bootstrap.js dan tambahkan yang berikut ini:

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

Edit resources/scss/app.scss dan tambahkan yang berikut ini:

// 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";

Kemudian gunakan

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

Pindahkan skrip ke bawah

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

Masih tidak bekerja pada saya

Saya FIXED skrip tidak dimuat karena salah ketik
Masalahnya ada di bagian bawah file layout default memiliki @yield('footer_scripts') tetapi file table.blade memiliki @section('footerscripts')
berharap orang lain akan menjelaskan lebih baik secara rinci.

Apakah halaman ini membantu?
0 / 5 - 0 peringkat