datatables.net ajax error - http://datatables.net/tn/7

Question

I am trying to follow an example of adding data to a datatables.net datatable using a JSON response based on this example https://www.datatables.net/examples/ajax/objects.html.

I am using an AJAX call to get a JSON response from a database.

I am getting the data and then using NewtonSoft JSON.Net to convert a datatable into a JSON array as per the code below

string jsonResult = null;
jsonResult = Newtonsoft.Json.JsonConvert.SerializeObject(dt);
jsonResult = jsonResult.Replace("[{", "{\"data\" :[{").Replace("}]", "}]}");
return jsonResult;

This is being successfully called from an AJAX call in a separate javascript file as per the next code snippet

 $.ajax({
            type: "POST",
            url: "TeamChecks.aspx/GetDataTables",
            data: JSON.stringify(params),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                console.log(data.d);
                populateTable(data.d, tableId);

            },
            error: function (data) {
                console.log(data);
            }
        }

Which then passes the returned values to a function that should format enter the data into the datatable accordingly as per the next set of code

function populateTable(json, tableId) {
        try {
            var table = $('#table_' + tableId).DataTable({
                "processing": true,
                "serverSide": true,
                "ajax": json,
                "columns:": [

                    { "data": "CaseHandlerStaffNumber" },
                    { "data": "RiskProfileText" },
                    { "data": "AssignedCheckerStaffNumber" },
                    { "data": "FeedbackUserStaffNumber" },
                    { "data": "ComplaintRef" },
                    { "data": "ChildComplaintRef" },
                    { "data": "CaseTypeText" },
                    { "data": "CheckGrade" }
                ]
            });
        } catch (e) {

        }
    }

The problem that I am getting is similar to this question here jquery datatables Ajax-Error / http://datatables.net/tn/7 however, I have tried this users solution and have the same issue.

I have followed all the recommended steps as detailed here https://www.datatables.net/manual/tech-notes/7 but do not see anything wrong with the responses that come back that relate to this.

I would be grateful if anyone could help me with this as I cannot see a way around the issue at the moment

thanks

Simon

1) What JSON is returned by asp.net? 2) Are you sure you are not double-serializing your JSON when you return it? See ASP.NET web services mistake: manual JSON serialization or ASP.NET WebMethod Returns JSON wrapped in quotes or maybe JSON.NET Parser seems to be double serializing my objects. — dbc
– dbc, Commented May 12, 2016 at 21:03
the JSON being returned is correct has been validated in JSONLint from both what is created by Newtonsoft JSON.Net and then when it came out into the JQuery so I don't think its double serializing but will check — Simon Price
– Simon Price, Commented May 13, 2016 at 4:15

Bindrid · Accepted Answer · 2017-06-09 08:25:59Z

Basically, you are working against yourself when you have an ajax call to get the data but then add ajax to the datatables definition.

Set up web method; note that when you do it like this, the data gets serialized twice, once by you and once by the scripting services module.

[WebMethod]
public string getTheData(String params){
    SomeDataClass dt = getthedata();
    return Newtonsoft.Json.JsonConvert.SerializeObject(dt);
}

now the ajax:

$(document).ready(function(){
    $.ajax({
        type: "POST",
        url: "TeamChecks.aspx/GetDataTables",
        data: JSON.stringify(params),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            // jquery did the first deserialization
            // here is where the second deserization happens.
            var data = JSON.parse(reponse.d);

            populateTable(data, tableId);

        },
        error: function (data) {
            console.log(data);
        }
    }
 });

then your function

function populateTable(json, tableId) {

        var table = $('#table_' + tableId).DataTable({
             // in this layout DataTables is expecting a straight array of objects or array of arrays depending on how you are sending the data back
            "data": json,
            "columns:": [
                { "data": "CaseHandlerStaffNumber" },
                { "data": "RiskProfileText" },
                { "data": "AssignedCheckerStaffNumber" },
                { "data": "FeedbackUserStaffNumber" },
                { "data": "ComplaintRef" },
                { "data": "ChildComplaintRef" },
                { "data": "CaseTypeText" },
                { "data": "CheckGrade" }
            ]
        });

  }

Collectives™ on Stack Overflow

datatables.net ajax error - http://datatables.net/tn/7

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related