Question

伙计们。我想在自己的视图上使用Datatables，并且从文档中跟随了一些讲师。但是，数据表不会出现，控制台只会显示“ datatables.min.js：17 Uncaught ReferenceError：未定义jQuery”。

这是我的代码。

头：

    <link rel="stylesheet" type="text/css" href="{{ asset(' css/datatables.min.css')}}">
<script type="text/javascript" charset="utf8" src="{{ asset('js/datatables.min.js')}}"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

查看：

<table class="table table-hover" id="table">
      <thead>
        <tr text-align="center">
          <td scope="col" text-align="center">Pesawat</td>
          <td scope="col" text-align="center">Pergi</td>
          <td scope="col" text-align="center">Tiba</td>
          <td scope="col" text-align="center">Waktu</td>
          <td scope="col" text-align="center">Durasi</td>
          <td scope="col" text-align="center">Harga</td>
        </tr>
      </thead>
      @if($flight)
      @foreach ($flight as $listflight)
      <tbody style="text-align: justify;">
        <tr>
          <td><img src={{$listflight['image']}}>{{$listflight['airlines_name']}}<br>Flight ID - ({{$listflight['flight_id']}}) </td>
          <td style="font-size: 15px; padding-top: 50px;">{{$listflight['departure_city_name']}} -{{$listflight['departure_airport_name']}}</td>
          <td style="font-size: 15px; padding-top: 50px;">{{$listflight['arrival_city_name']}} - {{$listflight['arrival_airport_name']}}</td>
          <td style="font-size: 15px; padding-top: 50px;">{{$listflight['departure_flight_date_str']}}</td>
          <td style="font-size: 15px; padding-top: 50px;">{{$listflight['duration']}}
          <br> {{$listflight['full_via']}}</td>
          <td style="font-size: 15px; padding-top: 40px; color: #ea7a08;">IDR. {{$listflight['price_value']}} &nbsp;<a href="#" class="btn btn-outline-secondary mt-3" style=""><i class="icon fa fa-receipt"></i>Order Ticket</a>
          </td>
        </tr>
      </tbody>
      @endforeach
    </table>

数据表：

@push('script')
<script type="text/javascript">
        $(document).ready(function() {
             $('#table').DataTable();
        });
    </script>
@endpush

Answer 1

将脚本标签放入DOM的顺序很重要。数据表取决于jQuery，因此必须先加载jQuery。

 @Value("${classpath}")
 private String classpath;

未捕获的ReferenceError：未定义jQuery Laravel

1 个答案: