استخدم Laravel 6.5.2 و PHP 7.2.26 (جرب أيضًا 7.3.3) و "yajra / laravel-datatables": "v1.5.0"
يظهر جدول البيانات ولكن لا يحتوي على أي بيانات.
نموذج شقة تحتوي على بيانات.
طرق
Route::resource('apartments', 'ApartmentController')
مراقب
<?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');
}
}
خدمة البيانات
<?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');
}
}
رأي
@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>
نتيجة في المتصفح
<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>
ربما خطأ مطبعي في الفهرس؟
// should be index
public function qindex(ApartmentDataTable $dataTable)
لا .... أفعل هذا للاختبار ونسخه عن طريق الخطأ.
التعليمات البرمجية الخاصة بك تبدو جيدة. أي أخطاء في وحدة التحكم؟
لا خطأ في أي مكان ...
dataTable $-> scripts () إنشاء كود:
<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>
إذا وضعت dd ($ dataTable-> ajax ()) ؛ في Controller قبل الإرجاع ، ثم يكون Illuminate \ HttpJsonResponse مع البيانات الكاملة.
أولا وقبل كل شيء آسف لغتي الإنجليزية
لدي نفس المشكلة ، وأجد الحل لي
إذا كنت أستخدم
section ("محتوى")
{{dataTable-> جدول ()}}
endection
push ("البرامج النصية")
{{$ dataTable-> scripts ()}}
تضمين التغريدة
إنه لا يعمل. لايوجد بيانات/
ولكن عندما لا أستخدم push و scripts ، فهذا يعمل بشكل جيد. مثله
section ("محتوى")
{{dataTable-> جدول ()}}
{{$ dataTable-> scripts ()}}
endection
لا أعرف هل هذا صحيح ، لكن هذا العمل.
في Bottstrap.js ألصق رمزًا مثل هذا
حاول {
window.Popper = يتطلب ('popper.js'). افتراضي ؛
window. $ = window.jQuery = تتطلب ('jquery') ؛
require('bootstrap');
require('datatables.net-bs4');
require('datatables.net-buttons-bs4');
} catch (e) {} `
في app.blade.php
<script src="{{ asset('js/app.js') }}"></script>
<script src="{{ asset('vendor/datatables/buttons.server-side.js') }}"></script>
وهو يعمل بشكل جيد
ولاحظت أيضًا ، عندما أستخدم
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 شكرا على النصيحة! ساعد الحل البديل حقًا:
@section('content')
{{ $dataTable->table() }}
{{ $dataTable->scripts() }}
<strong i="7">@endsection</strong>
مرحبا،
أنا أستخدم adminlte والحل الخاص بي هو
بدلا من
Push ("البرامج النصية")
{{$ dataTable-> scripts ()}}
تضمين التغريدة
استعمال
Push ('js')
{{$ dataTable-> scripts ()}}
تضمين التغريدة
أستخدم https://getstisla.com/getting-started ولدي نفس المشكلة.
أعتقد أن هذه مشكلة في القوالب وليس على حزم yajra أو جدول البيانات لأن وحدة التحكم لا تعرض أخطاء.
أنا أيضا كان عندي نفس المشكلة. لقد قمت بحلها عن طريق إضافة
<script src="{{ asset('js/app.js') }}"></script>
@stack('scripts')
لا يزال الأمر لا يعمل معي ، لقد فعلت كل شيء أعلاه وما زلت لا تظهر أي بيانات ، هناك أي شخص يساعدني
ما فعلته لإنجاحه (Laravel 7):
قم بتحرير resources/js/bootstrap.js
وأضف ما يلي:
require('bootstrap');
require('datatables.net-bs4');
require('datatables.net-buttons-bs4');
قم بتحرير resources/scss/app.scss
وأضف ما يلي:
// 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";
ثم استخدام
<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>
انقل البرنامج النصي إلى الأسفل
@stack('scripts')
</body>
</html>
مازلت لا تعمل علي
لا يتم تحميل البرامج النصية الثابتة بسبب خطأ مطبعي
المشكلة في الجزء السفلي من ملف التنسيق الافتراضي يحتوي على @yield('footer_scripts')
لكن ملف table.blade يحتوي على @section('footerscripts')
آمل أن يشرح البعض الآخر بشكل أفضل بالتفصيل.
التعليق الأكثر فائدة
أولا وقبل كل شيء آسف لغتي الإنجليزية
لدي نفس المشكلة ، وأجد الحل لي
إذا كنت أستخدم
section ("محتوى")
{{dataTable-> جدول ()}}
endection
push ("البرامج النصية")
{{$ dataTable-> scripts ()}}
تضمين التغريدة
إنه لا يعمل. لايوجد بيانات/
ولكن عندما لا أستخدم push و scripts ، فهذا يعمل بشكل جيد. مثله
section ("محتوى")
{{dataTable-> جدول ()}}
{{$ dataTable-> scripts ()}}
endection
لا أعرف هل هذا صحيح ، لكن هذا العمل.
في Bottstrap.js ألصق رمزًا مثل هذا
حاول {
window.Popper = يتطلب ('popper.js'). افتراضي ؛
window. $ = window.jQuery = تتطلب ('jquery') ؛
} catch (e) {} `
في app.blade.php
وهو يعمل بشكل جيد