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 = "[email protected]";
            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": "[email protected]",
"KeyResource": false
},
{
"Id": 2,
"FullName": "Jon",
"Email": "[email protected]",
"KeyResource": false
},
{
"Id": 3,
"FullName": "Stephen",
"Email": "[email protected]",
"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. Make sure you fully validate the returned Json — Chris
– Chris, Commented Nov 4, 2014 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
– Luke Stoward, Commented Nov 4, 2014 at 18:00

Luke Stoward · Accepted Answer · 2014-11-04 19:33:15Z

1

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.

answered Nov 4, 2014 at 19:33

Luke Stoward

1,54016 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Jquery Datatables Ajax Response

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related