Datatable is not a function, cant recognize js

0
votes

I have a little trouble using the datatable.

I think I have declared my sources with jquery first and then datatable (I was on their site to retrieve the link that contains the latest version) but when I load the web page I always have the same error message:

Uncaught SyntaxError: Unexpected token { jQuery.Deferred exception: $ (...). DataTable is not a function TypeError: $ (...). DataTable is not a function      at HTMLDocument. (https: // localhost: 44338 / Events: 87: 27)      at l (https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:29375)      at c (https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:29677) undefined

This is obviously a known problem and I realized after some research but I still can not solve it ...

@model IEnumerable<jak.formulaire.Models.Events>
@* Datatable of Events member *@
<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Event name</th>
            <th>Status</th>
        </tr>
    </thead>
</table>

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

@section Scripts{
    <script>
        $(document).ready(function () {
            $('#example').DataTable();
        });
    </script>
}

EDIT// I post an image of the network result.

enter image description here

2
javascriptjqueryasp.net-mvcdatatabledatatables
you are including 2 copies of jQuery. remove the second one. – Shyju
Yep thats why i tough but when i remove "<script src="ajax.googleapis.com/ajax/libs/jquery/3.3.1/…>" i got the following error: jQuery is not defined... So i dont get it. – Korpin
remove the second one jquery.js – Shyju
Thx for you help, i had only one jquery.js but i just had to put my reference inside of @section Scripts{}. – Korpin

2 Answers

0
votes

Ok i managed to found how to solve it!

I had to include this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>

Inside of @section Scripts{}

0
votes

Is it laravel framework? if yes please 

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

delete defer key after js file.