Why won't datatables plug-in not work for my ASP.NET MVC 4?

Question

I want to enable infinite scrolling. So I have installed datatables plug-in using nuGet on my Visual Studio 2012 project. It is a standard model, view, and controller project.

1. Ran "Install-Package jquery.datatables" in Package Manager Console
2. Added < thead > and < tbody > to the view
3. Added script to the view
4. Took a look at similar issues on stackoverflow, but no success

Problem I am coding up a demo to teach myself infinite scrolling, in preparations for a serious project. I have about 30 names. So it should be something where I want to show the first 10 names and it can infinite scroll to show everyone. My project compiles with no errors. However, when I look table. I see no change being rendered at all by datatables plugin. It displays the 30 names, just like before.

Model-View

 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; }

}

Controller Action

public ActionResult Index()
        {
            return View(db.ISModel.ToList());
            //return View();
        }

Layout File

    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/Scripts/jquery.dataTables.js")
    @Scripts.Render("~/bundles/modernizr")

Please note that my layout was just an autogenerated by MSVS2012. It has the standard Home and About buttons. As well as autogenerated login features.

View

    @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”值。