laravel 5.4 数据表不工作 jquery $ referenceError

Question

我的 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);
    }
}

我也写了这两条路线，问题是这不是显示来自数据table的数据，因为ajax只显示table个标题。 Auth::routes();

Route::get('/admin', 'dashboardController@getIndex')->name('admin');
Route::get('/admin.data', 'dashboardController@getArtists')->name('admin.data');

当我检查控制台时，这段代码显示 $referenceError。

在我的 admin.blade.php 母版页中，我加载了所有 jquery 和数据 table 的资产。像这样，因为我正在使用 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>

在母版页的页脚。

Answer 1

问题是DOM-ready callback，即

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

... 在 jQuery 库加载之前被调用。

纠正此问题的最佳方法是将 javascript 包含在您的视图中 @yield blade 标签：

示例：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。

以下是您想实际执行的操作的几个示例：

laravel 5.4 数据表不工作 jquery $ referenceError

laravel 5.4 datatables not working jquery $ referenceError

php

datatables

laravel-5.4