Jquery 没有加载 laravel 5.7答案

【问题标题】：Jquery is not loading with laravel 5.7Jquery 没有加载 laravel 5.7
【发布时间】：2019-05-26 10:13:09
【问题描述】：

我正在使用 Laravel Framework 5.7.19 并希望在我的刀片视图中重新创建以下示例：Custom filtering - range search

在layouts.app 内我已经定义了我的布局：

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">

    <!-- ag-grid
    <script src="https://unpkg.com/ag-grid-enterprise/dist/ag-grid-enterprise.min.noStyle.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css">
    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-balham.css">
-->
    <!-- jquery -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

</head>
<body>
<div id="app">
    @include('layouts.nav.mainNav')

    <main class="py-4">
        @yield('content')
    </main>
</div>

</body>

<script>
    $(document).ready(function () {
        /* Custom filtering function which will search data in column four between two values */
        $.fn.dataTable.ext.search.push(
            function (settings, data, dataIndex) {
                var min = parseInt($('#min').val(), 10);
                var max = parseInt($('#max').val(), 10);
                var age = parseFloat(data[3]) || 0; // use data for the age column

                if ((isNaN(min) && isNaN(max)) ||
                    (isNaN(min) && age <= max) ||
                    (min <= age && isNaN(max)) ||
                    (min <= age && age <= max)) {
                    return true;
                }
                return false;
            }
        );

        $(document).ready(function () {
            var table = $('#example').DataTable();

            // Event listener to the two range filtering inputs to redraw on input
            $('#min, #max').keyup(function () {
                table.draw();
            });
        });
    });
</script>

</html>

在datatables.blade.php 中，我正在使用预填充数据定义我的数据表（如示例中所示）：

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="">

                <table border="0" cellspacing="5" cellpadding="5">
                    <tbody>
                    <tr>
                        <td>Minimum age:</td>
                        <td><input type="text" id="min" name="min"></td>
                    </tr>
                    <tr>
                        <td>Maximum age:</td>
                        <td><input type="text" id="max" name="max"></td>
                    </tr>
                    </tbody>
                </table>
                <table id="example" class="display" style="width:100%">
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>Tiger Nixon</td>
                        <td>System Architect</td>
                        <td>Edinburgh</td>
                        <td>61</td>
                        <td>2011/04/25</td>
                        <td>$320,800</td>
                    </tr>
                    <tr>
                        <td>Garrett Winters</td>
                        <td>Accountant</td>
                        <td>Tokyo</td>
                        <td>63</td>
                        <td>2011/07/25</td>
                        <td>$170,750</td>
                    </tr>
                    <tr>
                        <td>Ashton Cox</td>
                        <td>Junior Technical Author</td>
                        <td>San Francisco</td>
                        <td>66</td>
                        <td>2009/01/12</td>
                        <td>$86,000</td>
                    </tr>
                    </tbody>
                    <tfoot>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                    </tfoot>
                </table>

            </div>
        </div>
    </div>
@endsection

如您所见，我的数据表未正确加载：

此外，我在我的 chrome 开发者控制台中收到以下错误：

任何建议我做错了什么？

【问题讨论】：

为什么你的<script> 在关闭</body> 之后？

标签： jquery laravel datatables laravel-blade

【解决方案1】：

您的错误与加载 JQuery 无关，您的数据表自定义功能应该在您的 ready() 功能之外，

   <script>
            // out side of ready function 
            /* Custom filtering function which will search data */
            $.fn.dataTable.ext.search.push(
                function (settings, data, dataIndex) {
                    var min = parseInt($('#min').val(), 10);
                    var max = parseInt($('#max').val(), 10);
                    var age = parseFloat(data[3]) || 0; // use data for the age column

                    if ((isNaN(min) && isNaN(max)) ||
                        (isNaN(min) && age <= max) ||
                        (min <= age && isNaN(max)) ||
                        (min <= age && age <= max)) {
                        return true;
                    }
                    return false;
                }
            );
           // out side of ready function end

            $(document).ready(function () {
                var table = $('#example').DataTable();

                // Event listener to the two range filtering inputs to redraw on input
                $('#min, #max').keyup(function () {
                    table.draw();
                });
            });
    </script>

【讨论】：

【解决方案2】：

这对我有用。 jquery 加载正常但无法正常工作。

我发现 Laravel 在设置导航栏/登录系统时会调用 jquery。在标题中你会发现：

<script src="{{ asset('js/app.js') }}" defer ><script>

我刚刚删除了 'defer' 并启动了 jquery。

<script src="{{ asset('js/app.js') }}"  ></script>

【讨论】：