在我的asp.net MVC应用程序中获取jQuery错误

时间:2016-09-19 09:12:47

标签: jquery asp.net-mvc asp.net-mvc-5

我在运行应用程序时在控制台中收到此错误

enter image description here

贝娄是我的包括

<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语法如下

<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是我的脚本代码

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

我关注this link,我的代码与链接几乎一样,所以我发现这是一种简单的方法,但我仍然无法查看排序过滤和分页

更新代码 所以现在我已经将我的表剃刀添加到局部视图中,现在我可以查看分页等...像贝娄一样

enter image description here

正如您在图片中看到的那样,展示实体和搜索栏位置不佳

我希望它们完全放在同一行

贝娄是我的包括

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

任何帮助都将受到高度赞赏

1 个答案:

答案 0 :(得分:0)

尝试包含

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

紧跟在你的“jquery.dataTables”

之后