Jquery Datatable referenced only through CDN works not with script files - asp.net-mvc

Question

I want to call my datatable by referencing relevant jquery files in MVC. But when I try to call dataTable instance it fails.
The error in chrome shows 'dataTable()' function not recognized or sometimes the jquery or $ is not recognized.
Following is my code with CDN which works:
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" />
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>`<div style="width: 900px; border: 1px solid black; padding: 3px">
<table id="datatable">
<thead>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Job Title</th>
<th>Web Site</th>
<th>Salary</th>
<th>Hire Date</th>
</tr>
</thead>
<tbody>
#foreach (var values in Model)
{
<tr>
<td>#values.Id</td>
<td>#values.FirstName</td>
<td>#values.LastName</td>
<td>#values.Gender</td>
<td>#values.JobTitle</td>
<td>#values.WebSite</td>
<td>#values.Salary</td>
<td>#values.HireDate</td>
</tr>
}
</tbody>
<tfoot>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Job Title</th>
<th>Web Site</th>
<th>Salary</th>
<th>Hire Date</th>
</tr>
</tfoot>
</table>
</div>
$('#datatable').dataTable();
Now if I call the same code referencing dataTable script files downloaded via 'Add -> Client Side Library' from visual studio and downloading datatable cdnjs files, it fails.
Following code fails:
<link href="~/lib/datatable/css/datatable.min.css" rel="stylesheet" />`<script src="~/lib/datatable/js/datatable.jquery.min.js"></script>`<script src="~/lib/datatable/js/datatable.min.js"></script>
<div style="width: 900px; border: 1px solid black; padding: 3px">
<table id="datatable">
<thead>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Job Title</th>
<th>Web Site</th>
<th>Salary</th>
<th>Hire Date</th>
</tr>
</thead>
<tbody>
#foreach (var values in Model)
{
<tr>
<td>#values.Id</td>
<td>#values.FirstName</td>
<td>#values.LastName</td>
<td>#values.Gender</td>
<td>#values.JobTitle</td>
<td>#values.WebSite</td>
<td>#values.Salary</td>
<td>#values.HireDate</td>
</tr>
}
</tbody>
<tfoot>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Job Title</th>
<th>Web Site</th>
<th>Salary</th>
<th>Hire Date</th>
</tr>
</tfoot>
</table>
<script>
$('#datatable').dataTable();
</script>
Any help or suggestions or ideas, on how to reference jquery files for datatable in MVC 5 project?.
Thanks In Advance!!!..

Answer 1

Everything seems ok. you just need to add call datatable method in document ready function
<script>
$(function(){
$("#datatable").dataTable();
})
</script>
After adding Ready function. check you are not loading JQuery twice.(ie. check in _Layout.cshtml page.)if so remove jquery reference from view.
Also make sure you are referencing valid datatable.js path.

Answer 2

You should change jQuery version to jQuery 1.11.3
https://datatables.net/blog/2015-04-30