Hi all;
I'm trying to use server-side processing for a datatable (yes, I'm sure I want server-side processing). However, my server-side is a Microsoft web service (mvc). I've configured the OperationContract so that it accepts "get", and returns a JSON string.
My problem is this: the returned JSON is not parsed correctly, for an error is thrown saying "Unable to get property 'length' of undefined or null reference".
Debugging info is available via: http://debug.datatables.net/axedeg.
My svc looks like this:
namespace DataTableTest
{
public class dtwebservice {
[OperationContract]
[WebInvoke(Method = "GET", ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.WrappedRequest)]
public string GetArticles(int start, int length)
{
DtData r = new DtData();
r.draw = 1;
r.recordsTotal = 12;
r.recordsFiltered = 12;
r.data.Add(new DtData.DtDataItem("Bert", "Anon", "Development"));
r.data.Add(new DtData.DtDataItem("Bart", "Van Der Anon", "Development"));
r.data.Add(new DtData.DtDataItem("Macy", "Anon", "Development"));
r.data.Add(new DtData.DtDataItem("Sander", "Anon", "Development"));
r.data.Add(new DtData.DtDataItem("Ruben", "Anon", "Development"));
r.data.Add(new DtData.DtDataItem("Frank", "Anon", "CEO"));
r.data.Add(new DtData.DtDataItem("Arjan", "De Anon", "Consultancy"));
r.data.Add(new DtData.DtDataItem("Paulien", "Anon", "Consultancy"));
r.data.Add(new DtData.DtDataItem("Orestis", "Anon", "Consultancy"));
r.data.Add(new DtData.DtDataItem("Malu", "Anon", "Administratie"));
r.data.Add(new DtData.DtDataItem("Larissa", "Anon", "Marketing"));
r.data.Add(new DtData.DtDataItem("Diana", "Van Anon", "Services"));
r.data.Add(new DtData.DtDataItem("Bjorn", "Anon", "Services"));
return new JavaScriptSerializer { MaxJsonLength = Int32.MaxValue }.Serialize(r);
}
}
public class DtData
{
public int draw { get; set; }
public int recordsTotal { get; set; }
public int recordsFiltered { get; set; }
public List<DtDataItem> data { get; set; }
public DtData()
{
this.data = new List<DtDataItem>();
}
public class DtDataItem
{
public string f2030 { get; set; }
public string f2031 { get; set; }
public string f2032 { get; set; }
public DtDataItem(string f2030, string f2031, string f2032)
{
this.f2030 = f2030;
this.f2031 = f2031;
this.f2032 = f2032;
}
}
}
My JavaScript (actually TypeScript) looks like this:
window.onload = () => {
var dtsettings = {
"processing": true,
"serverSide": true,
"ajax": {
url: "dtwebservice.svc/GetArticles"
},
"columns": [
{
title: "first name",
classname: "firstname",
data: "f2030",
visible: true
},
{
title: "last name",
classname: "lastname",
data: "f2033",
visible: false
},
{
title: "department",
classname: "department",
data: "f2032",
visible: true
}
]
};
$('#example').dataTable(dtsettings);
}
And my HTML body looks like this (yes, I've loaded all JS and CSS files).
<body>
<h1>TypeScript, DataTables and Knockout</h1>
<div id="content">
<table id="example" class="display" cellspacing="0" width="100%"></table>
</div>
</body>