DataTables Laravel 5.2 无法加载

Question

我想在我的项目（laravel 5.2）中使用数据表，尤其是在我的 /events-log 视图中，但结果是这样的

This is events-log view 1

这是events-log.blade.php

<div class="table-responsive">
 <table class="table table-bordered table-hover" id="event-log-table">
  <thead class="bg-light" align="center">
   <tr class="border-1">
    <th class="border-1">Time Stamp</th>
    <th class="border-1">Event</th>
    <th class="border-1">Event Type</th>
   </tr>
  </thead>
 </table>
</div>

而且，这是我的 DataTable 的 java 脚本

<script>
    $(document).ready(function() {
        $('#event-log-table').DataTable({
            "processing": true,
            "serverSide": true,
            "ajax": "/events-log",
            "columns": [
                { data: 'TIME_STAMP'},
                { data: 'EVENT' },
                { data: 'ID_EVENT' }
            ]
        });
    });
</script>

这是我的控制器，控制器的名字是EventLogController.php

public function show()
{
  $EVENT_LOG = EventLogModel::select(['ID_EVENT','TIME_STAMP','EVENT']);;

  return Datatables::of($EVENT_LOG)->make(true);
}

这是我的route.php

Route::get('/events-log', 'EventLogController@show');

最后一个是我的EventLogModel.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;
use Illuminate\Support\Facades\DB;

class EventLogModel extends Model
{
    protected $table ='EVENT_LOG';
    protected $fillable = [
        'TIME_STAMP',
        'EVENT'
    ];
}

这是我的 js 文件

<!-- ============================================================== -->
<!-- Optional JavaScript -->
<!-- jquery 3.3.1 -->
<script src="{{ asset('assets/vendor/jquery/jquery-3.3.1.min.js') }}"></script>
<!-- bootstap bundle js -->
<script src="{{ asset('assets/vendor/bootstrap/js/bootstrap.bundle.js') }}"></script>
<!-- slimscroll js -->
<script src="{{ asset('assets/vendor/slimscroll/jquery.slimscroll.js') }}"></script>
<!-- main js -->
<script src="{{ asset('assets/libs/js/main-js.js') }}"></script>
<!-- chart chartist js -->
<script src="{{ asset('assets/vendor/charts/chartist-bundle/chartist.min.js') }}"></script>
<!-- sparkline js -->
<script src="{{ asset('assets/vendor/charts/sparkline/jquery.sparkline.js') }}"></script>
<!-- chart c3 js -->
<script src="{{ asset('assets/vendor/charts/c3charts/c3.min.js') }}"></script>
<script src="{{ asset('assets/vendor/charts/c3charts/d3-5.4.0.min.js') }}"></script>
<script src="{{ asset('assets/vendor/charts/c3charts/C3chartjs.js') }}"></script>
<script src="{{ asset('assets/libs/js/dashboard-ecommerce.js') }}"></script>
<script src="{{ asset('assets/vendor/bootstrap-select/js/bootstrap-select.js') }}"></script>

<script src="{{ asset('assets/vendor/sweet-alert/dist/sweetalert2.all.min.js') }}"></script>

<script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

这是我的css文件

<link rel="stylesheet" href="{{ asset('assets/vendor/bootstrap/css/bootstrap.min.css') }}">
<link href="{{ asset('assets/vendor/fonts/circular-std/style.css') }}" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('assets/libs/css/style.css') }}">
<link rel="stylesheet" href="{{ asset('assets/vendor/fonts/fontawesome/css/fontawesome-all.css') }}">
<link rel="stylesheet" href="{{ asset('assets/vendor/charts/chartist-bundle/chartist.css') }}">
<link rel="stylesheet" href="{{ asset('assets/vendor/charts/morris-bundle/morris.css') }}">
<link rel="stylesheet" href="{{ asset('assets/vendor/fonts/material-design-iconic-font/css/materialdesignicons.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/vendor/charts/c3charts/c3.css') }}">
<link rel="stylesheet" href="{{ asset('assets/vendor/fonts/flag-icon-css/flag-icon.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/vendor/bootstrap-select/css/bootstrap-select.css') }}">
<link rel="stylesheet" href="{{ asset('assets/vendor/sweet-alert/dist/sweetalert2.css') }}">

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">

谁能解决这个问题？谢谢。

Answer 1

改变这一行

$EVENT_LOG = EventLogModel::select(['ID_EVENT','TIME_STAMP','EVENT']);;

到这里。

$EVENT_LOG = EventLogModel::select('ID_EVENT','TIME_STAMP','EVENT');

在你的标题中添加这一行

<meta name="csrf-token" content="{{ csrf_token() }}" />

在你的 ajax 中

 $('#event-log-table').DataTable({
            ...
            "ajax": {
               url : "/events-log",
               data: { "_token": $('meta[name="csrf-token"]').attr('content') }
             },

        });

Answer 2

在 DataTables 中，您使用 ::of(...)。这应该是：

public function show()
{
  $EVENT_LOG = EventLogModel::select(['ID_EVENT','TIME_STAMP','EVENT']);;

  return Datatables::recordsOf($EVENT_LOG)->make(true);
}