laravel 5.4數據表不工作jQuery的$的ReferenceError

我有這樣的代碼對我的看法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'} 
       ] 
      }); 
     });

，這是我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); 
    } 
}

，我也寫了這兩條路，問題是這不會顯示數據表中的數據，因爲ajax只顯示錶標題。 Auth :: routes（）;

Route::get('/admin', '[email protected]')->name('admin'); 
Route::get('/admin.data', '[email protected]')->name('admin.data');

這段代碼當我檢查控制檯我看到它顯示$ referenceError。

在我的admin.blade.php母版頁我加載了所有jquery和datatables的資產。就像我使用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>

位於母版頁的頁腳處。

來源

2017-10-20 Mahamoud Mahamed

這意味着瀏覽器不識別代碼中的'$' o確保在使用之前包含jquery。 –

@AmrAly我編輯了我的問題，請再次查看，因爲我添加了最後一節如何在管理員的主頁面添加腳本。 –

的問題是，DOM-ready callback，即

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

...正在jQuery庫加載之前調用。

以糾正這種情況的最好辦法是包括你的觀點的JavaScript與@yield刀片標籤：

例子：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

，然後在admin.blade.php具有區域中，你所概述的問題看起來是這樣的：

... 

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

更改爲上述結構將允許您按所需順序包含JavaScript。

這裏有你想要的動作做了幾個例子：

來源

2017-10-20 01:57:33 developernator

@developemator我做了你所說的，我也刪除了腳本，它運行良好。 –

laravel 5.4數據表不工作jQuery的$的ReferenceError

回答

相關問題