J.D*_*Ray 5 datatables asp.net-mvc-5
我在DataTables论坛上问了这个问题,但为了获得快速反馈,我愿意忍受一些滥用,所以我在这里交叉发帖.
我刚刚开始冒险进入ASP.NET MVC5,拥有牢固扎根于1995年的Web开发技能.经过一番努力,基本的CRUD应用程序正在运行,我正在着手打扮一些.DataTables提供的功能似乎非常合适.
我对JavaScript的理解可以放在一个小的注释块中,但我可以遵循格式良好的指令.所以,当我发现文档说"只需添加这三行包含行和JS的这一行,然后你就开始运行",我认为这很简单.我做了我认为的指示所说的,没有任何改变.做了更多的研究,我发现某人的项目为MVC5和DataTables 1.10创建了绑定,但是指令很稀疏(如果你理解他们要告诉你的事情,"简单"只是很容易).
从DataTables说明开始("只需添加这三行......"),这就是我所拥有的:
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.js">
</script>
<h2>Index</h2>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<table class="table" id="products" >
<tr>
<th> @Html.DisplayName("Code")</th>
<th>@Html.DisplayNameFor(model => model.Name)</th>
<th>@Html.DisplayNameFor(model => model.Category)</th>
<th>@Html.DisplayName("Active")</th>
<th>@Html.DisplayName("Published")</th>
</tr>
@foreach (var item in Model) {
<tr>
<td>@Html.DisplayFor(modelItem => item.ProductCode)</td>
<td>@Html.DisplayFor(modelItem => item.Name)</td>
<td>@Html.DisplayFor(modelItem => item.Category)</td>
<td>@Html.DisplayFor(modelItem => item.Active.Value)</td>
<td>@Html.DisplayFor(modelItem => item.Published.Value)</td>
<td>@Html.ActionLink("Details", "Details", new { id=item.ID })</td>
</tr>
}
</table>
从理论上讲,我需要添加的是一行:
$(document).ready( function () {
$('#products').DataTable();
} );
缺少什么(这是我的基本理解的来源)是在哪里添加它.我已经尝试了几个地方,并没有改变表格.我尝试的第一个地方是script第三个区块的标签:
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.js">
$(document).ready( function () {
$('#products').DataTable();
} );</script>
那是对的地方吗？我是否正确识别目标表？我是否需要弄清楚如何实现https://github.com/ALMMa/datatables.mvc上的代码？在掌握JavaScript之前,我应该放弃所有的希望吗？
谢谢你能给我的任何帮助.
干杯.
JD
小智 5
我也很难在 MVC5 中使用 DataTables。我试图在 Scaffolding 针对视图模型生成的标准索引视图中使用它。我能够构建一个小型原型，但不能针对表的 FOREACH 生成器。
我从建议的示例中输入了许多不同的 JS 和 CSS 代码行，并修补了 BundleConfig。还是没有快乐。
索引会正确显示，但不会显示可排序列等功能。
最终，通过将标题中的列数与显示的表体中的列数完全匹配来解决这个问题。请注意，显示的列中不计算 Id 列。在我的示例中，有 6 个显示的列和六个标题。但是模型中有七个隐藏了 Id 列。操作列也有一个标题。
现在到处都是 JavaScript 和 css 片段。我想清理它以重新使用。
我能够部分纠正捆绑。然后一位技术娴熟的同事向我展示了如何仅在索引页面中而不是在 _Layout 页面中正确部署包引用，因为它会不必要地加载到每个页面上。
您还将看到任何路径中都没有版本号。这是为了在不更改源代码的情况下允许 JS、CSS 和 DataTable 更新。
确保您在该<table>行中指定的 Table Id与底部 Javascript 中的值完全匹配，并且在 JS 中前面有一个 #。当我完成这项任务时，我的页面中没有剩余的 CSS 行 JS。请尝试以下操作。
通过添加修改 AppStart 文件夹中的 RegisterBundles 代码
//
// These are the DataTables bundles
// Be sure to activate them on the Page where they are needed or on _Layout
//
bundles.Add(new ScriptBundle("~/bundles/dataTables").Include(
"~/Scripts/DataTables/jquery.dataTables.js",
"~/Scripts/DataTables/dataTables.bootstrap.js"));
bundles.Add(new StyleBundle("~/Content/dataTables").Include(
"~/Content/DataTables/css/jquery.dataTables.css",
"~/Content/DataTables/css/jquery.dataTables.min.css"));
然后在索引页面的顶部和底部添加对包的引用。
在索引页的头部
@model IEnumerable<"Your Own Model">.PriceList>
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@Styles.Render("~/Content/dataTables")
<h2>Price List</h2>
<table id="table_id" class="table table table-striped table-hover">
<thead>
<tr>
<th>
Product Ptr
</th>
<th>
Product Class
</th>
<th>
Ver
</th>
<th>
Year
</th>
<th>
Description
</th>
<th>
Action
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
@Html.HiddenFor(modelItem => item.PriceList_Id)
<td>
@Html.DisplayFor(modelItem => item.Product_Pt)
</td>
<td>
@Html.DisplayFor(modelItem => item.ProductClass_Pt)
</td>
<td>
@Html.DisplayFor(modelItem => item.Version)
</td>
<td>
@Html.DisplayFor(modelItem => item.Year)
</td>
<td>
@Html.DisplayFor(modelItem => item.ProductDesc)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id=item.PriceList_Id }) |
@Html.ActionLink("Details", "Details", new { id = item.PriceList_Id }) |
@Html.ActionLink("Delete", "Delete", new { id = item.PriceList_Id })
</td>
</tr>
}
</tbody>
</table>
@section scripts {
@Scripts.Render("~/bundles/dataTables")
<script type="text/javascript">
$(document).ready(function () {
$('#table_id').DataTable();
});
</script>
}
所以，这就是我必须做的：
我在_Layout.cshtml标签中添加了以下内容head：
<link href="~/Content/jquery.dataTables.css" rel="stylesheet" type="text/css"/>
<link href="~/Content/jquery.dataTables_themeroller.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" charset="utf8" src="~/Scripts/jquery.dataTables.js"></script>
我BundleConfig.cs添加了以下几行：
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-1.10.2.min.js"));
bundles.Add(new ScriptBundle("~/bundles/datatables").Include(
"~/Scripts/jquery.dataTables.js"));
最后，在底部Index.cshtml是对脚本的调用：
<script type="text/javascript" charset="utf8">
$(document).ready( function () {
$('#products').DataTable();
} );
</script>
我怀疑这些BundleConfig.cs位是多余的，但它正在工作，所以我不想现在就尝试优化它。
干杯。
京东