Jquery Datatables Ajax Response

Question

I am trying to follow the datatable example for Ajax data source (objects) found here. I am using asp.net and have the following handler which receives my data, processes it and provides the response.

public class UsersHandler : IHttpHandler
{
    private const string JsHeader = @"{{""data"" {0}}}";


    public void ProcessRequest(HttpContext context)
    {
        IEnumerable<SystemUser> data = SystemUserLogic.LoadAllSystemUsers();

        List<SimpleUser> userlist = new List<SimpleUser>();
        foreach (SystemUser su in data)
        {
            SimpleUser simple = new SimpleUser();
            simple.Id = su.Id;
            simple.FullName = su.NameFirst;
            simple.Email = "example@email.co.uk";
            userlist.Add(simple);
        }
        string json = JsonConvert.SerializeObject(userlist, Formatting.Indented);
        context.Response.ContentType = "text/plain";
        context.Response.ContentEncoding = Encoding.UTF8;
        context.Response.Cache.SetNoStore();
        context.Response.Expires = -1;
        context.Response.Write(String.Format(JsHeader, json));
    }

which deliveries the correct response when I catch it in the browser and look at the data via the network traffic. My aspx page contains the following.

$('#table_id').DataTable({
            "ajax": '/Handlers_New/UsersHandler.ashx',
            "columns": [
                { "data": "Id" },
                { "data": "FullName" },
                { "data": "Email" },
                { "data": "KeyResource" }
            ]

        });

However when the page loads, I am getting this error:

DataTables warning: table id=table_id - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1

The outputted data looks like this,

    {"data" [
{
"Id": 1,
"FullName": "Admin",
"Email": "example@email.co.uk",
"KeyResource": false
},
{
"Id": 2,
"FullName": "Jon",
"Email": "example@email.co.uk",
"KeyResource": false
},
{
"Id": 3,
"FullName": "Stephen",
"Email": "example@email.co.uk",
"KeyResource": false
}, etc.....

Please tell me why I am getting this error. Should I be manipulating the json object differently, or am I missing something with the Jquery datatables?

Are you including the necessary jQuery library files? Could you add your html code for the table? Also, have a look at this [datable reference](http://www.datatables.net/manual/tech-notes/1). Make sure you fully validate the returned Json — Chris, Nov 04 '14 at 16:08
Yeah the jQuery files have been included, in the correct order. My table simply contains a table with several td inside a thead for the column headings. I have also checked the response with no issues, response status is correct etc, the returned data is like the above, following from that link, which is generated by the error message. :/ Still stuck with this... — Luke Stoward, Nov 04 '14 at 18:00

score 1 · Answer 1 · answered Nov 04 '14 at 19:33

I have managed to fix my issue amazingly due to jsonlint. I ran my code through that and it turns out I was missing a ':' in my jsHeader. So what I had was:

private const string JsHeader = @"{{""data"" {0}}}";

and what I have now which now works is:

private const string JsHeader = @"{{""data"": {0}}}";

Hope this helps any one else encountering a similar issue.

Jquery Datatables Ajax Response

1 Answers1