我的mvc 4应用程序中的数据表有问题。我的表（id = example）和数据出现在我的视图中，但是数据表没有得到应用，我得到了javascript运行时错误：对象不支持属性或方法'DataTable'。
我已经阅读了几个可能已经有我答案的问题，包括this，但我只是不明白自己解决这个问题。我很确定我在_layout.cshtml页面中不止一次引用了jquery，但我不知道在哪里。它在下面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title - Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
@Styles.Render("~/Content/css")
@Styles.Render("~/Content/themes/base/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@*--CSS Files-- *@
@*--Reset CSS-- *@
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css" />
@*--jquery-ui css-- *@ <link href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
@*--DataTables CSS--*@ <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css" />
@*--Custom Datatable CSS-- *@ <link href="../../Content/eventDataTable.css" rel="stylesheet" type="text/css" />
@*--jQuery Library--*@
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
@*--jquery-UI-- --*@
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js" type="text/javascript"></script>
@*--DataTables-- *@
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
@*--DataTables ColumnFilters-- *@
<script src="~/Scripts/jquery.dataTables.columnFilter.js" type="text/javascript"></script>
@if (false) {
<script src="~/Scripts/jquery.validate-vsdoc.js" type="text/javascript"></script>
}
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">@Html.ActionLink("MVC", "Index", "Home")</p>
</div>
<div class="float-right">
<section id="login">
@Html.Partial("_LoginPartial")
</section>
@*<nav>
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home") </li>
</ul>
</nav>*@
</div>
</div>
</header>
<div id="body">
@RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
@RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© MVC Application @DateTime.Now.Year</p>
</div>
</div>
</footer>
@RenderSection("scripts", required: false)
</body>
</html>
下面是我的一个观点中的html和javascript。这个javascript上面的html中的表有一个id为example
@section featured {
@using (Html.BeginForm("Portland", "City", FormMethod.Post, new { id = "CityForm" }))
{
<section class="featured">
<div class="content-wrapper">
<center>
@Html.DropDownList("OrderAsc", (SelectList)ViewData["CityName"], "-- Select Your City --",
new {
onchange = "dropDownList(this);"
} // end of new onchange
) @*End of Html.DropDownList*@
</center>
</div>
</section>
}
}
<h2>@ViewBag.Title</h2>
<table id="example" border="0" cellpadding="0" cellspacing="0" class="display" >
<thead>
<tr>
<th>Name</th>
<th>Date</th>
<th>Day of Week</th>
<th>Venue</th>
<th>TicketLink</th>
<th>Status</th>
<th>Related</th>
</tr>
</thead>
<tfoot>
<tr>
<th >Name</th>
<th>Sort by date</th>
<th>Weekday</th>
<th> Venue</th>
<th></th>
<th></th>
<th>Related</th>
</tr>
</tfoot>
<tbody>
@foreach (MVC.Models.Event m in (System.Collections.IEnumerable)ViewData.Model) {
var ticketLinkText = m.TicketLink;
<tr>
<td>
@Html.Raw(m.Name)
</td>
<td>
@*@Html.DisplayFor(modelItem => item.ShowDate) Want to format dateTime*@
@Html.Raw(m.ShowDate.Value.Date.ToString("MM/dd/yyyy"))
</td>
<td>
@Html.Raw(m.DayOfWeek)
</td>
<td>
@Html.Raw(m.Venue)
</td>
<td>@if ( ticketLinkText.Contains("http"))
{
<a href ="@Html.Raw(m.TicketLink)" target="_blank">TicketLink</a>
}
else
{
@Html.Raw(m.TicketLink)
}
</td>
<td>
@Html.Raw(m.Status)
</td>
<td>
@Html.Raw(m.Related)
</td>
</tr>
}
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function () {
$('#example').DataTable({
//"bPaginate": true,
//"sPaginationType": "full_numbers",
//"bFilter": true,
//"bSort": true,
//"bInfo": false,
//"bAutoWidth": true,
//"aaSorting": [[1, "asc"]] //initial sorting once datatable is applied
})
.columnFilter({ //sPlaceHolder: "head:before",
aoColumns: [{ type: "text" },
{ type: "date-range" },
{ type: "text" },
{ type: "text" },
null,
null,
{ type: "text" },
]
});
});
</script>
另外，这是我的bundleconfig.cs，因为我在其他几篇帖子中提到过。
public class BundleConfig
{
// For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.theme.css"));
}
}