Why won't dataTables work with ASP.NET MVC 4 Razor

I'm trying to use dataTables.js with my ASP.NET 4 MVC project. I have tables that get data from the controller and then generate a table with Razor syntax. Since it's C#, it's server-side, so it should work. Below is my code, can somebody tell me what I'm missing please?

View-Model

 public class ClassViewModel
    {
        public int Id { get; set; }
        [Required(ErrorMessage="Name is required")]
        public string Name { get; set; }
        [Required(ErrorMessage = "Abbreviation is required")]
        public string Abbreviation { get; set; }
        [Required(ErrorMessage = "Description is required")]
        public string Description { get; set; }
        public string DescriptionFrench { get; set; }
        [Required(ErrorMessage = "Semesters is required")]
        public string Semesters { get; set; }
        [Required(ErrorMessage = "Year is required")]
        public string Year { get; set; }
        [Required(ErrorMessage = "Date is required")]
        public string Date { get; set; }
        [Required(ErrorMessage = "Time is required")]
        public string Time { get; set; }
        public bool French { get; set; }
        public bool Shared { get; set; }
        public bool Concentration { get; set; }
        public IEnumerable<DepartmentViewModel> Departments { get; set; }
    }

Controller Action

 public ActionResult Index()
    {            
        IEnumerable<ClassViewModel> classes = db.classes.AsEnumerable().ToList()
            .Select(c => new ClassViewModel()
            {
                Id                = c.CID,
                Name              = c.Classname,
                Abbreviation      = c.Abbreviation,
                Description       = c.Description,
                DescriptionFrench = c.DescriptionFR,
                Semesters         = c.Semesters,
                Year              = c.Year,
                Date              = c.DateTime.ToShortDateString(),
                Time              = c.DateTime.ToShortTimeString(),
                French            = c.French,
                Shared            = c.shared,
                Concentration     = c.Concentration
            });
        return View(classes);
    }

Layout file contains a Scripts section with the following

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/Scripts/knockout-2.1.0.js")
@Scripts.Render("~/Scripts/jquery.dataTables.js")
@Scripts.Render("~/content/themes/bootstrap/js/bootstrap.js")
@Scripts.Render("~/Scripts/hideshow.js")
@Scripts.Render("~/Scripts/jquery.validate.js")
@Scripts.Render("~/Scripts/fullcalendar.min.js")    
@Scripts.Render("~/Content/themes/admin/js/changePassword.js")
@RenderSection("scripts", required: false)

View

@model IEnumerable<IAUCollege.Models.ClassViewModel>

@{
    ViewBag.Title = "Classes";
    Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
}
<h2>Classes</h2>
<p>
    Type the class name, abbreviation and/or semester to filter the results.
</p>
<div class="searchbox-container">
    @Html.ActionLink("Add Class", "Create", new {}, new {@class="btn btn-primary pull-right"})
    <input type="text" class="searchbox pull-right" id="classSearch" placeholder="Search Classes"/>
</div>  
<table id="classesTable" class="table white-table table-striped table-bordered table-hover">
    <tr>    
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Abbreviation)
        </th>     
        <th>
            @Html.DisplayNameFor(model => model.Semesters)
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>        
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Abbreviation)
            </td>          
            <td>
                @Html.DisplayFor(modelItem => item.Semesters)
            </td>        
            <td>
                <div class="btn-group">
                    <a href="/admin/classes/edit/@item.Id" rel="tooltip" title="Edit"><i class="icon-edit"></i></a>
                    <a href="/admin/classes/details/@item.Id" rel="tooltip" title="Details"><i class="icon-list-alt"></i></a>
                    <a href="/admin/classes/delete/@item.Id" rel="tooltip" title="Delete"><i class="icon-remove"></i></a>
                </div>
            </td>
        </tr>
    }

</table>
@section Scripts{
    <script type="text/javascript">
        $(document).ready(function () {
            $("#classesTable").dataTable();
        });
    </script>
}

When I view the page I get the following javascript error. Uncaught TypeError: Cannot read property 'asSorting' of undefined

Please tell me what I'm missing to get this working...I think it's something to do with the buttons column, but I'm not sure. Thanks.