為什么數據表插件對我的ASP.NET MVC 4不起作用？

Question

我想啟用無限滾動。 因此，我已經在Visual Studio 2012項目中使用nuGet安裝了數據表插件。 它是一個標准的模型，視圖和控制器項目。

1. 在軟件包管理器控制台中運行“ Install-Package jquery.datatables”
2. 在視圖中添加了<thead>和<tbody>
3. 向視圖添加了腳本
4. 看了關於stackoverflow的類似問題，但沒有成功

問題我正在編寫一個演示以自學無限滾動，以准備進行一個認真的項目。 我大約有30個名字。 所以應該在其中顯示前10個名稱，並且可以無限滾動以顯示所有人。 我的項目編譯沒有錯誤。 但是，當我看表時。 我看到datatables插件根本沒有呈現任何更改 。 像以前一樣，它顯示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>
}

Answer 1

首先嘗試將“ sScrollY”參數的值減小到較小的值，如果有幫助，則您需要找到一些技巧來調整父元素高度的“ sScrollY”值。