Utilisez Laravel 6.5.2, PHP 7.2.26 (essayez également 7.3.3) et "yajra / laravel-datatables": "v1.5.0"
Le tableau de données apparaît mais ne contient aucune donnée.
Model Apartment contient des données.
Itinéraires
Route::resource('apartments', 'ApartmentController')
Manette
<?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');
}
}
Service 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');
}
}
Vue
@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>
Résultat dans le navigateur
<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>
Peut-être une faute de frappe sur l'index?
// should be index
public function qindex(ApartmentDataTable $dataTable)
Non .... Je fais cela pour le test et copié accidentellement.
Votre code semble correct. Des erreurs sur la console?
Aucune erreur nulle part ...
$ dataTable-> scripts () génèrent du 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>
Si je mets dd ($ dataTable-> ajax ()); dans Controller avant le retour, puis a Illuminate \ HttpJsonResponse avec des données complètes.
Tout d'abord désolé pour mon anglais
J'ai le même problème et je trouve une solution pour moi
Si j'utilise
@section ('contenu')
{{$ dataTable-> table ()}}
@endsection
@push ('scripts')
{{$ dataTable-> scripts ()}}
@endpush
Ça ne marche pas. Pas de données/
Mais quand je n'utilise pas @push et @scripts, cela fonctionne bien. Comme ça
@section ('contenu')
{{$ dataTable-> table ()}}
{{$ dataTable-> scripts ()}}
@endsection
Je ne sais pas si c'est vrai, mais ce travail.
Dans bottstrap.js, je colle du code comme celui-ci
`essayez {
window.Popper = require ('popper.js'). default;
window. $ = window.jQuery = require ('jquery');
require('bootstrap');
require('datatables.net-bs4');
require('datatables.net-buttons-bs4');
} catch (e) {} `
dans app.blade.php
<script src="{{ asset('js/app.js') }}"></script>
<script src="{{ asset('vendor/datatables/buttons.server-side.js') }}"></script>
Et ça marche bien
Et j'ai aussi remarqué, quand j'utilise
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 Merci pour la pointe! La solution de contournement a vraiment aidé:
@section('content')
{{ $dataTable->table() }}
{{ $dataTable->scripts() }}
<strong i="7">@endsection</strong>
Salut,
J'utilise adminlte et ma solution de contournement est
au lieu de
@Push ('scripts')
{{$ dataTable-> scripts ()}}
@endpush
utilisation
@Push ('js')
{{$ dataTable-> scripts ()}}
@endpush
J'utilise https://getstisla.com/getting-started et j'ai le même problème.
Je pense que c'est un problème avec la création de modèles pas sur les packages yajra ou datatable car la console n'affiche pas d'erreurs.
J'ai également eu le même problème. Je l'ai résolu en ajoutant @Stack ('scripts') à ma mise en page (app.blade). Ainsi
<script src="{{ asset('js/app.js') }}"></script>
@stack('scripts')
ça ne fonctionne toujours pas avec moi, j'ai tout fait ci-dessus et toujours pas de données affichées, il y en a qui m'aide
Ce que j'ai fait pour que ça marche (Laravel 7):
Modifiez resources/js/bootstrap.js
et ajoutez ce qui suit:
require('bootstrap');
require('datatables.net-bs4');
require('datatables.net-buttons-bs4');
Modifiez resources/scss/app.scss
et ajoutez ce qui suit:
// 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";
Ensuite, utilisez
<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>
Déplacer le script vers le bas
@stack('scripts')
</body>
</html>
Ne travaille toujours pas sur moi
Les scripts FIXED ne se chargent pas à cause d'une faute de frappe
le problème est au bas du fichier de mise en page par défaut a @yield('footer_scripts')
mais le fichier table.blade a @section('footerscripts')
J'espère que d'autres expliqueraient mieux en détails.
Commentaire le plus utile
Tout d'abord désolé pour mon anglais
J'ai le même problème et je trouve une solution pour moi
Si j'utilise
@section ('contenu')
{{$ dataTable-> table ()}}
@endsection
@push ('scripts')
{{$ dataTable-> scripts ()}}
@endpush
Ça ne marche pas. Pas de données/
Mais quand je n'utilise pas @push et @scripts, cela fonctionne bien. Comme ça
@section ('contenu')
{{$ dataTable-> table ()}}
{{$ dataTable-> scripts ()}}
@endsection
Je ne sais pas si c'est vrai, mais ce travail.
Dans bottstrap.js, je colle du code comme celui-ci
`essayez {
window.Popper = require ('popper.js'). default;
window. $ = window.jQuery = require ('jquery');
} catch (e) {} `
dans app.blade.php
Et ça marche bien