Getting jQuery Error in my asp.net MVC application

Question

I am getting this error in console when i run my application

Bellow are my includes

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
@*<script src="~/Scripts/jquery-3.1.0.js"></script>*@
<script src="~/Scripts/jquery-3.1.0.min.js"></script>
<link href="~/Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/bootstrap-toggle.js"></script>
<link href="~/Content/bootstrap-toggle.css" rel="stylesheet" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="favicon.ico" type="image/ico" />
<link rel="shortcut icon" href="~/favicon.ico" />

Razor syntax is as follows

<table id="myTable" class="table table-bordered table-responsive table-hover">
                        <thead>
                            <tr>
                                <th style="color:#006bff; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif">
                                    Name
                                </th>
                                <th style="color:#006bff; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif">
                                    Ocurrence Time
                                </th>
                                <th style="color:#006bff; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif">
                                    Recover Time
                                </th>
                            </tr>
                        </thead>
                        <tbody>

                            @{

                                if (ViewData["events"] != null)
                                {
                                    if (ViewData.Values != null && ViewData.Values.Count() > 0)
                                    {
                                        foreach (System.Data.DataRow dr in (ViewData["events"] as System.Data.DataTable).Rows)
                                        {

                                            <tr>

                                                <td style="border:1px solid black; color:green;font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif">
                                                    <span style="font-size:12px;">@dr[0]</span>
                                                </td>

                                                <td style="border:1px solid black; color:green;font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif">
                                                    <span style="font-size:12px;">@(string.Format("{0:dd MMMM yyyy hh:mm tt}", dr[1]))</span>
                                                </td>

                                                <td style="border:1px solid black; color:green;font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif">
                                                    <span style="font-size:12px;"> @(string.Format("{0:dd MMMM yyyy hh:mm tt}", dr[2]))</span>
                                                </td>

                                            </tr>
                                        }
                                    }
                                }
                            }
                        </tbody>
                    </table>

Bellow is my script code

<script>
$(document).ready(function(){
$('#myTable').DataTable();});

I am following this link and my code is almost as same as in the link so i found it an easy way to do it but still i am unable to view the sorting filtering and paging

Updated Code So now i have added my table razor into a partial view and now i am able to view paging etc.. like bellow

As you see in the image the show entities and search bar is not well placed

i want them to be placed exactly in same line

Bellow are my includes

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/jquery-3.1.0.min.js"></script>
<link href="~/Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>

Any help would be highly appreciated

Answer 1

Try include

https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js

right after your "jquery.dataTables"