Data Tables are not loading - maybe Javascript error?

I am not sure if this is a Laravel or Javascript issue, but I need help trying to get my Data Tables to work. I think it's JavaScript, but the GitHub documentation is not available as the website isn't working - so I can't work out how to solve this.

Could someone please help?

I have followed the instructions from https://github.com/yajra/laravel-datatables/issues and also a video https://www.youtube.com/watch?v=1wgLY-V69MM on how to install the Data Table.

However the page loads the Table Headers, not the Table Data.

Here is my code

index.blade.php

@extends('admin.layouts.admin')

@section('content')



<h1>Customers</h1>
<br>
<a href="/admin/customers/create" class="btn btn-primary">Add New Customer</a>

<br><br>

<section class="content">
    <div class="row">
        <div class="box">
            <div class="box-body">
                <table id="customersdata" class="table table-bordered table-hover">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>Company Name</th>
                        <th>Name</th>
                        <th>Address</th>
                        <th>City</th>
                        <th>State</th>
                        <th>Postcode</th>
                        <th>Country</th>
                        <th>Phone</th>
                        <th>Email</th>
                        <th>Actions</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</section>


@endsection

@section('scripts')

    {{--    --jQuery 3----}}
    <script src="{{ asset('/bower_components/jquery/dist/jquery.min.js') }}"></script>
    {{--    --Bootstrap 3.3.7----}}
    <script src="{{ asset('/bower_components/bootstrap/dist/js/bootstrap.min.js') }}"></script>
    {{--    --Slim Scroll----}}
    <script src="{{ asset('/bower_components/jquery-slimscroll/jquery.slimscroll.min.js') }}"></script>
    {{----FastClick----}}
    <script src="{{ asset('/bower_components/fastclick/lib/fastclick.js') }}"></script>
    {{--    AdminLTE App--}}
    <script src="{{ asset('/dist/js/adminlte.min.js') }}"></script>
    {{--    --Data Table ----}}
    <script src="{{ asset('/bower_components/datatables.net/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js') }}"></script>

    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"></script>
    <script>
        $(document).ready( function () {
            $('#customersdata').DataTable({
                "processing": true,
                "serverSide": true,
                "ajax": "http://cms.test/admin/customers/api",
                "columns": [
                    {"data": "id" },
                    {"data": "companyname"},
                    {"data": "name"},
                    {"data": "address"},
                    {"data": "city"},
                    {"data": "state"},
                    {"data": "postcode"},
                    {"data": "country"},
                    {"data": "phone"},
                    {"data": "email"},
                ]
            });

        });
    </script>

@endsection

@section('scripts')
    @parent
    {{ Html::script(mix('assets/admin/js/dashboard.js')) }}
@endsection

@section('styles')
    @parent
    {{ Html::style(mix('assets/admin/css/dashboard.css')) }}
@endsection

Then my controller,

    public function index()
    {
//        $customers = Customer::all();
//        return view('admin.customers.index', compact('customers'));
        return view('admin.customers.index');
    }

    public function ReturnCustomerDataView()

    {

        $query = Customer::select('id', 'companyname', 'name', 'address', 'city', 'state', 'postcode', 'country', 'phone', 'email');
        return datatables($query)->make(true);

    }

My Routes

    // Customers
    Route::get('/customers',             'CustomersController@index')->name('customers.index');
    Route::get('/customers/api',         'CustomersController@ReturnCustomerDataView')->name('customers.api.returncustomerdataview');

So as I said, the page loads - but no data is being returned. I've checked PhpMyAdmin and there's definitely data there.

The only things that jump out at me, are these errors here on the console.

https://imgur.com/cuUspF6

It seems that when I ran the update it did not seem to do the CSS or JS files correctly? I'm just a bit confused how to solve this exactly.

The folders here https://imgur.com/9DaFNYU do not match what is needed in the "bower_components".

This is what my page looks like when it loads... (sorry I dont seem to be able to upload images here)

https://imgur.com/QGsfivj