Fill Jquery data table using ajax and c# passing json response

Question

I want to display data using jQuery data table. I'm passing JSON response from C# using a Webmethod. The data jQuery is receiving is correctly formatted. The data table is showing an empty structure for certain rows and an alert as shown below:

Data tables warning : table id - example Requested unknown parameter 1 for row 0.

Also, the table structure is showing double quotes in the 1st column, and that's it.

I searched on that alert but the information got was not at all useful. Something is there I miss out. Kindly help me with this one.

My code:

$(document).ready(function () {
    $.ajax({
        type: "POST",
        url: "data_table2.aspx/BindDatatable",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            console.log(JSON.parse(data.d));
            console.log(JSON.parse(data.d));
            $('#example').dataTable({
                "aaData": data.d,
                "aoColumns": [
                    { "aaData": "UserId" },
                    { "aaData": "UserName" },
                    { "aaData": "Location" }
                 ]
            }); 
        } 
    });
});

Webmethod:

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static string BindDatatable()
{
    DataTable dt = new DataTable();
    dt = getData();
    List<User5> data = new List<User5>();

    foreach (DataRow dtrow in dt.Rows)
    {
        User5 user = new User5();
        user.UserId = dtrow["id"].ToString();
        user.UserName = dtrow["name"].ToString();
        user.Location = dtrow["city"].ToString();
        data.Add(user);
    }       

    System.Web.Script.Serialization.JavaScriptSerializer jSearializer = new System.Web.Script.Serialization.JavaScriptSerializer();

    string aaData = jSearializer.Serialize(data);
    // aaData = "{\"data\": " + aaData + "}";
    return aaData;
}

The data jQuery receives is:

[{
    "UserId": "2",
    "UserName": "Nitin",
    "Location": "Mumbai"
}, {
    "UserId": "3",
    "UserName": "NAkshay",
    "Location": "Thane"
}, {
    "UserId": "4",
    "UserName": "Nil",
    "Location": "Pune"
}, {
    "UserId": "5",
    "UserName": "Vinit",
    "Location": "KArve nagar"
}, {
    "UserId": "6",
    "UserName": "Rahul",
    "Location": "Kothrud"
}, {
    "UserId": "7",
    "UserName": "Pravin",
    "Location": "Hinjewadi"
}, {
    "UserId": "8",
    "UserName": "Pavan",
    "Location": "Mg City"
}]

if I removed that commentd line in c# code o/p will be

{
    "data": [{
        "UserId": "2",
        "UserName": "Nitin",
        "Location": "Mumbai"
    }, {
        "UserId": "3",
        "UserName": "NAkshay",
        "Location": "Thane"
    }, {
        "UserId": "4",
        "UserName": "Nil",
        "Location": "Pune"
    }, {
        "UserId": "5",
        "UserName": "Vinit",
        "Location": "KArve nagar"
    }, {
        "UserId": "6",
        "UserName": "Rahul",
        "Location": "Kothrud"
    }, {
        "UserId": "7",
        "UserName": "Pravin",
        "Location": "Hinjewadi"
    }, {
        "UserId": "8",
        "UserName": "Pavan",
        "Location": "Mg City"
    }]
}

And This has worked for me $('#example').dataTable({ "aaData": JSON.parse(data.d), "aoColumns": [ { "mData": "UserId" }, { "mData": "UserName" }, { "mData": "Location" } ] }); just parse data as JSON.parse(data.d), — Paddy
– Paddy, Commented Jun 30, 2015 at 10:24

Paddy · Accepted Answer · 2015-06-30 10:28:59Z

2

 $('#example').dataTable({
              "aaData": JSON.parse(data.d),
              "aoColumns": [
              { "mData": "UserId" },
              { "mData": "UserName" },
              { "mData": "Location" }
                ]
        });

Need to parse the info with "aaData": JSON.parse(data.d) one.

answered Jun 30, 2015 at 10:28

Paddy

512 silver badges8 bronze badges

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

1 Comment

davidkonrad Over a year ago

Oh, so you just needed to return actual JSON :) I think you can do that serverside too with return new JavaScriptSerializer().Serialize(data) - you should accept your own answer - I am sure other people could learn of it in the future.

Collectives™ on Stack Overflow

Fill Jquery data table using ajax and c# passing json response

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related