mData is null or not an object

cormack12

Been trying some MVC for the first time in VS2013, took a little of fiddling round to get a basic test/demo running. So I thought I'd try and have a go at getting dataTables working with it. However, when viewing the application index.cshtml, it keeps throwing an error (tested with Chrome and IE8). I've tried creating an empty <th> in the <thead> as well to placehold.

Here is my bundleconfig.cs

bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-1.10.2.js"));

_layout.cshtml

<title>@ViewBag.Title - My ASP.NETApplication</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)

And the relevant part of my own index.cshtml

<table class="table" id="plist">
<thead>
    <tr>
        <th>@Html.DisplayNameFor(model => model.1)</th>
        <th>@Html.DisplayNameFor(model => model.2)</th>
        <th>@Html.DisplayNameFor(model => model.3)</th>
        <th>@Html.DisplayNameFor(model => model.4)</th>
        <th>@Html.DisplayNameFor(model => model.5)</th>
        <th>@Html.DisplayNameFor(model => model.6)</th>
        <th>@Html.DisplayNameFor(model => model.7)</th>

    </tr>
</thead>

<tbody>
@foreach (var item in Model) 
{
   <tr>
    <td>@Html.DisplayFor(modelItem => item.1)</td>
    <td>@Html.DisplayFor(modelItem => item.2)</td>
    <td>@Html.DisplayFor(modelItem => item.3)</td>
    <td>@Html.DisplayFor(modelItem => item.4)</td>
    <td>@Html.DisplayFor(modelItem => item.5)</td>
    <td>@Html.DisplayFor(modelItem => item.6)</td>
    <td>@Html.DisplayFor(modelItem => item.7)</td>
    <td>@Html.ActionLink("Edit", "Edit", new { id=item.1 }) |
        @Html.ActionLink("Details", "Details", new { id=item.1 }) |
        @Html.ActionLink("Delete", "Delete", new { id=item.1 })
    </td>
</tr>
}</tbody>
</table>
<link href="~/Content/jquery.dataTables.css" rel="stylesheet" />
<script src="~/Scripts/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8">$(document).ready(function() {$('#plist').dataTable();});</script>

The IE debugger throws the exception here in the dataTables.js script file:

$.each( _fnGetRowElements( oSettings, rowOne[0] ).cells, function (i, cell) {
                    var col = oSettings.aoColumns[i];
            
                    if ( col.mData === i ) {
                        var sort = a( cell, 'sort' ) || a( cell, 'order' );
                        var filter = a( cell, 'filter' ) || a( cell, 'search' );
            
                        if ( sort !== null || filter !== null ) {
                            col.mData = {
                                _:      i+'.display',
                                sort:   sort !== null   ? i+'.@data-'+sort   : undefined,
                                type:   sort !== null   ? i+'.@data-'+sort   : undefined,
                                filter: filter !== null ? i+'.@data-'+filter : undefined
                            };
            
                            _fnColumnOptions( oSettings, i );

Chrome doesn't throw a script error, but also doesn't load the dataTable filters

Uploaded debug code: eqobat