I get error when laoding server data

[Zapnologica]

I have the following MVC action method:

[HttpPost] public async Task<JsonResult> Data(FilterRequest filter) { try { IQueryable<SerialRouting> filteredItems = _db.SerialRoutings; if (!string.IsNullOrEmpty(filter.Search.Value)) { filteredItems = _db.SerialRoutings.Where(c => c.AccountCode.Contains(filter.Search.Value) || c.Client.ClientID.Contains(filter.Search.Value) || c.Serialnumber.ToString().Contains(filter.Search.Value) ); } int totalRecords = filteredItems.Count(); filteredItems = filteredItems.OrderBy(x => x.Serialnumber); filteredItems = filteredItems.Skip(filter.Start).Take(filter.Length); var displayItems = await filteredItems.Select(x => new SerialRoutingViewModel { Id = x.SerialRoutingIdentity, SerialNumber = x.Serialnumber, AccountCode = x.AccountCode, ClientId = x.Client.ClientID }).ToListAsync(); return Json(new PageResponse<SerialRoutingViewModel>(filter.Draw, totalRecords, displayItems.Count, displayItems.ToArray())); } catch (Exception ex) { Debug.WriteLine(ex); } return null; }

Here is my SerialRoutingViewModel class:

public class SerialRoutingViewModel { public SerialRoutingViewModel() { } public SerialRoutingViewModel(SerialRouting item) { Id = item.SerialRoutingIdentity; SerialNumber = item.Serialnumber; AccountCode = item.AccountCode; ClientId = item.Client.ClientID; } public long SerialNumber { get; set; } public string AccountCode { get; set; } public string ClientId { get; set; } public int Id { get; set; } }

And here is my View:

<table id="dyntable" class="table table-striped table-bordered table-hover responsive">
    <thead>
        <tr>
            <th>Id</th>
            <th>SerialNumber</th>
            <th>AccountCode</th>
            <th>ClientId</th>
            <th>Options</th>
        </tr>
    </thead>
    <tbody></tbody>
    <tfoot>
        <tr>
            <th>Id</th>
            <th>SerialNumber</th>
            <th>AccountCode</th>
            <th>ClientId</th>
            <th>Options</th>
        </tr>
    </tfoot>
</table>
@section scripts
{
    @Scripts.Render("~/bundles/jquery");
    @Scripts.Render("~/bundles/dataTables")

    <script type="text/javascript">
        $(document).ready(function () {

            $('#dyntable').DataTable({
                responsive: true,
                stateSave: true,
                serverSide: true,
                searchDelay: 300,
                autoWidth: false,
                ajax: {
                    url: '@Url.Action("Data","SerialRoutings")',
                    type: 'POST'
                },
                processing: true,
                columns: [
                    {
                        "sName": "Id",
                        "bSortable": false
                    },
                    {
                        "sName": "SerialNumber",
                        "bSortable": true
                    },
                    {
                        "sName": "AccountCode",
                        "bSortable": true
                    },
                    {
                        "sName": "ClientId",
                        "bSortable": true
                    },
                    {
                        "sName": "Options",
                        "data": "",
                        "bSortable": false                        
                    }
                ]
            });
        });
}

I get the following error in JS console when loading the page:

jquery.dataTables.js:4108 Uncaught TypeError: Cannot read property 'length' of undefined