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>
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
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
@ 3s777 Terima kasih atas tipnya! Solusi ini sangat membantu:
@section('content')
{{ $dataTable->table() }}
{{ $dataTable->scripts() }}
<strong i="7">@endsection</strong>
Hai,
Saya menggunakan adminlte dan solusi saya adalah
dari pada
@Tokopedia ('skrip')
{{$ dataTable-> skrip ()}}
@dpush
menggunakan
@Tokopedia
{{$ dataTable-> skrip ()}}
@dpush
Saya menggunakan https://getstisla.com/getting-started dan saya memiliki masalah yang sama.
Saya pikir ini adalah masalah dengan template bukan pada paket yajra atau datatable karena konsol tidak menampilkan kesalahan.
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.
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');
} tangkap (e) {} `
di app.blade.php
Dan itu bekerja dengan baik