我想启用无限滚动。因此,我在我的 Visual Studio 2012 项目中使用 nuGet 安装了数据表插件。它是一个标准的模型、视图和控制器项目。
- 在包管理器控制台中运行“安装包 jquery.datatables”
- 在视图中添加了 <thead> 和 <tbody>
- 在视图中添加脚本
- 在stackoverflow上查看了类似的问题,但没有成功
问题 我正在编写一个演示来教自己无限滚动,为一个严肃的项目做准备。我有大约 30 个名字。所以它应该是我想显示前 10 个名字的地方,它可以无限滚动显示给每个人。我的项目编译没有错误。但是,当我看表时。我看到数据表插件根本没有呈现任何变化。它像以前一样显示 30 个名称。
模型视图
public class ISModel
{
//[ScaffoldColumn(false)]
public int ID { get; set; }
public String name { get; set; }
public int age { get; set; }
// array list of bools for displaying achievement images? if true, display image on list, else don't display (alt text for 1.g)
//public bool[] achieve { get; set; }
}
控制器动作
public ActionResult Index()
{
return View(db.ISModel.ToList());
//return View();
}
布局文件
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/Scripts/jquery.dataTables.js")
@Scripts.Render("~/bundles/modernizr")
请注意,我的布局只是 MSVS2012 自动生成的。它有标准的主页和关于按钮。以及自动生成的登录功能。
看法
@model IEnumerable<ISDemo.Models.ISModel>
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<table id = "demoTable">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.name)
</th>
<th>
@Html.DisplayNameFor(model => model.age)
</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.name)
</td>
<td>
@Html.DisplayFor(modelItem => item.age)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id=item.ID }) |
@Html.ActionLink("Details", "Details", new { id=item.ID }) |
@Html.ActionLink("Delete", "Delete", new { id=item.ID })
</td>
</tr>
}
</tbody>
</table>
@section Scripts{
<script type="text/javascript">
$(document).ready(function(){
$('#demoTable').dataTable({
"bScrollInfinite": true,
"bScrollCollapse": true,
"sScrollY": "200px"
});
});
</script>
}