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

First try to decrease the value "sScrollY" parameter to some less value and if it helps you then you should need to find some technique to adjust "sScrollY" value with parent element's height.