0

我想启用无限滚动。因此，我在我的 Visual Studio 2012 项目中使用 nuGet 安装了数据表插件。它是一个标准的模型、视图和控制器项目。

  1. 在包管理器控制台中运行“安装包 jquery.datatables”
  2. 在视图中添加了 <thead> 和 <tbody>
  3. 在视图中添加脚本
  4. 在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>
}
4

1 回答 1

1

首先尝试将值“sScrollY”参数减小到一些较小的值，如果它对您有帮助，那么您应该找到一些技术来调整“sScrollY”值与父元素的高度。

于 2013-05-04T16:01:49.040 回答