Binding DataTables with a WCF Service

nummer31

According to the thread here: http://datatables.net/forums/discussion/7949/getting-cannot-read-property-length-of-undefined-in-chrome-error/p1
I have the following in place in my client:
[code]
$('#testDatatable').dataTable({
"bProcessing": true,
//Works fine if Data.txt is used instead of service here
"sAjaxSource": 'http://localhost:9183/Service.svc/GetCustomer',
"aoColumns": [
{ "mData": "Age" },
{ "mData": "Name" }
]
});
[/code]
This is what my service is returning just like datatables accept:
[code]
[OperationContract]
[WebGet(ResponseFormat = WebMessageFormat.Json)]
public string GetCustomer()
{
List customers = new List();
customers.Add(new Customer { Name = "Ibrahim", Age = 10 });
customers.Add(new Customer { Name = "John Doe", Age = 20});

JavaScriptSerializer js = new JavaScriptSerializer();
string returnArray = @"{ ""aaData"":"+js.Serialize(customers)+"}";
return returnArray;
}
[/code]

But upon running I get the following error:
[code]Uncaught TypeError: Cannot read property 'length' of undefined[/code]

If I am using data filled .txt file with the same string that is being returned from my service instead of my service then it is working fine.
Why?? What is the difference here?
I have been stuck here for 2 days now. Someone please show the way.

nummer31

This is the Debug DataTables: http://debug.datatables.net/efuces

nummer31

I was able to figure out the problem thanks to all the help I didn't get from the forum users.
Problem was that 'sAjaxSource' would be expecting an array of arrays or an array of objects.
My service was returning JSON in the form of string which does not fit its convention and there was no way to parse it either. So, I created a class that could be serliazed to meet the convention (array of objects) of DataTable 'sAjaxSource'. Code Below:

[code]
public class DataTableModel
{
public string sEcho { get; set; }
public int iTotalRecords { get; set; }
public int iTotalDisplayRecords { get; set; }
public List aaData { get; set; }
}
[/code]

[code]
[OperationContract]
[WebGet(ResponseFormat = WebMessageFormat.Json)]
public DataTableModel GetCustomers()
{
var customers = new List();

using(var context = new Context())
{
customers = context.Customers.ToList();
}

return new DataTableModel { sEcho = "1", iTotalRecords = 20, iTotalDisplayRecords = 20, aaData = customers };

}
[/code]

Another point to note is that, even though data is coming from server you don't need to put the prop 'bServerSide : true' cause that would mean that it will request data from server in every single event e.g. sort and next page. Hope it helps someone.