DataTables Laravel 5.2 Can not be loaded

Question

I want to use Datatables in my project (laravel 5.2) especially in my /events-log view, but the result like this

This is events-log view 1

This is 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>

And, this is my java script for DataTable

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

This is my controller, name of controller is EventLogController.php

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

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

And this is my route.php

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

the last is my 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'
    ];
}

This is my js file

<!-- ============================================================== -->
<!-- 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>

And this is my css file

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

Can anybody solve this problem? THANK YOU.

Answer 1

In DataTables you use ::of(...). This should be:

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

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

Answer 2

Change this line

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

To this.

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

in your header add this line

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

in your ajax

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

        });