Laravel 5.4 datatables ne fonctionne pas jquery $ ReferenceError

Question

Je possède ce code sur ma vue dashboard.index

<table class="table table-striped" id="artists-table"> 
       <thead> 
        <tr> 
         <th>id</th> 
         <th>Name</th> 
         <th>Created_at</th> 
         <th>Updated_at</th> 
        </tr> 
       </thead> 
      </table> 
     </div> 
    </div> 

    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $('#artists-table').DataTable({ 
       processing: true, 
       servedSide: true, 
       responsive: true, 
       ajax: '{{route('admin.data')}}', 
       columns: [ 
        {data: 'id', name: 'id'}, 
        {data: 'name', name: 'name'}, 
        {data: 'created_at', name: 'created_at'}, 
        {data: 'updated_at', name: 'updated_at'} 
       ] 
      }); 
     }); 

et voici mon code dashboardController

class dashboardController extends Controller 
{ 
    // 



    public function __construct(){ 
     $this->middleware('auth'); 
    } 

    public function getIndex(){ 
     return view('admin.dashboard.index'); 
    } 

    public function getArtists(){ 
     return Datatables::of(artist::query())->make(true); 
    } 
} 

et moi avons également écrit ces deux voies, le problème est que ceci n'affiche pas les données des datatables car les en-têtes de table d'ajax seulement sont montrés. Auth :: routes(); Ce code lorsque j'inspecte la console, je vois qu'il affiche $ referenceError. Dans ma page principale admin.blade.php, j'ai chargé tous les jquery et les assets des datatables. comme ceci car j'utilise Bootstrap 3.

<script src="{{ asset('theme/js/jquery-3.1.1.min.js') }}"></script> 
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> 
<script src="{{ asset('theme/js/bootstrap.min.js') }}"></script> 
<script src="{{ asset('js/app.js') }}"></script> 
<script src="{{asset('theme/js/select2.min.js')}}"></script> 

au pied de la page maître.

Answer 1

La question est que le DOM-ready callback, à savoir

$(document).ready(function(){ 
      $('#artists-table').DataTable({ 

... est appelée avant que la bibliothèque jQuery a chargé.

La meilleure façon d'y remédier est d'inclure le javascript pour votre point de vue avec une étiquette de lame @yield:

Exemple: admin.dashboard.index

@section('content') 

... 

     <table class="table table-striped" id="artists-table"> 
      <thead> 
       <tr> 
        <th>id</th> 
        <th>Name</th> 
        <th>Created_at</th> 
        <th>Updated_at</th> 
       </tr> 
      </thead> 
     </table> 
    </div> 
</div> 


... 


@endsection 

@section('footer_scripts') 

    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $('#artists-table').DataTable({ 
       processing: true, 
       servedSide: true, 
       responsive: true, 
       ajax: '{{route('admin.data')}}', 
       columns: [ 
        {data: 'id', name: 'id'}, 
        {data: 'name', name: 'name'}, 
        {data: 'created_at', name: 'created_at'}, 
        {data: 'updated_at', name: 'updated_at'} 
       ] 
      }); 
     }); 
    </script> 

@endsection 

Et puis dans votre admin.blade.php ont la zone que vous avez décrit dans votre question ressembler à:

... 

     @yield('content') 

    </div> 

    {{-- Scripts --}} 
    <script src="{{ asset('theme/js/jquery-3.1.1.min.js') }}"></script> 
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> 
    <script src="{{ asset('theme/js/bootstrap.min.js') }}"></script> 
    <script src="{{ asset('js/app.js') }}"></script> 
    <script src="{{asset('theme/js/select2.min.js')}}"></script> 

    @yield('footer_scripts') 

</body> 

La modification de la structure ci-dessus vous permettra d'inclure javascript dans l'ordre que vous voulez.

Voici quelques exemples de ce que vous voulez faire dans l'action:

• https://github.com/jeremykenedy/laravel-auth/blob/master/resources/views/layouts/app.blade.php

• https://github.com/jeremykenedy/laravel-auth/blob/master/resources/views/usersmanagement/show-users.blade.php

• https://github.com/jeremykenedy/laravel-auth/blob/master/resources/views/scripts/datatables.blade.php