Unable to bind datatables from JSON data

ashisrai1@gmail.com

Hi,
I'm unable to bind the datatables with returned JSON. I'm using web service to get the data from server side.
Below is the returned code -

 var table = $('#example').DataTable({
                scrollY: "300px",
                scrollX: true,
                scrollCollapse: true,
                paging: true,
                fixedColumns: true,
                ajax: {
                    type: "POST",
                    url: "ITSMWebService.aspx/GetDataTableDemoData",
                   
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    
                    columns: [

                       { "data": "ProcessArea" },
                       { "data": "ProcessFunction" },
                       { "data": "Process" },
                       { "data": "Status" }
        
        
                    ],
                    success: function (data) {
                        console.log(data.d);
                        //response(data.d);
                    },
                    error: function(xhr, status, text) {
                        var response = $.parseJSON(xhr.responseText);
                        alert(response);
                        console.log('Failure!');

                        if (response) {
                            console.log(response.error);
                        } else {
                            // This would mean an invalid response from the server - maybe the site went down or whatever...
                        }
                    }
                 }
            });

Success block is executing perfectly fine in above code.
And below is the JSON (console.log())-

[{
    "ProcessArea": "Run  ",
    "ProcessFunction": "Work Entry Management ",
    "Process": "Incident Management-old",
    "Status": 0
}, {
    "ProcessArea": "Run  ",
    "ProcessFunction": "Work Entry Management ",
    "Process": "Service Request Management-old",
    "Status": 0
}, {
    "ProcessArea": "Run  ",
    "ProcessFunction": "Work Entry Management ",
    "Process": "Administrative Request Management -old",
    "Status": 0
}, {
    "ProcessArea": "Run  ",
    "ProcessFunction": "Work Entry Management ",
    "Process": "Problem Management-old",
    "Status": 0
}]

Please help.

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

bindrid

Among other things you have overridden some of the ajax calls that datatable depends on.

here is a link to one of my client side pages that uses a web service on GitHub that may be a reference for you.

https://github.com/bindrid/DataTablesServerSide/blob/master/Client%20Side%20Page

var table = $('#example').DataTable({
    scrollY: "300px",
    scrollX: true,
    scrollCollapse: true,
    paging: true,
    fixedColumns: true,
    //you put the columns inside the ajax so i moved them out
    columns: [
 
       { "data": "ProcessArea" },
       { "data": "ProcessFunction" },
       { "data": "Process" },
       { "data": "Status" }
 
 
    ],
    ajax: {
        type: "POST",
        url: "ITSMWebService.aspx/GetDataTableDemoData",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
 
        // when your ajax is inside the datatable structure like this, 
        // Datatables depends on  it not being overridden as you are doing here commented out.
        //success: function (data) {
        //    console.log(data.d);
        //    //response(data.d);
        //},
        
        // as you have noted, .net puts stuff inside the "d" object, you can use dataSrc
        // to address that
        dataSrc: "d",
        error: function(xhr, status, text) {
            var response = $.parseJSON(xhr.responseText);
            alert(response);
            console.log('Failure!');
 
            if (response) {
                console.log(response.error);
            } else {
                // This would mean an invalid response from the server - maybe the site went down or whatever...
           }
        }
    }
});