How to implement server side processing when "json string" returned from the server controller

sajay

I am able to get the json form the server controller (Asp.net Web API 2 - HttpResponseMessage) in a String format.

At client side (under dataSrc) I am using the following code and able to bind the data in the datatable

 $('#datatable').DataTable({
                    "serverSide": true,
                    "ajax": {
                        "url": "/Api/HealthPlanTest/GetDetailsJson",
                        "type": "POST",
                        "datatype": "JSON",
                    },
                    "dataSrc": function (jsonString) {
                        var jsonData = JSON.parse(jsonString);
                        return jsonData.data;
                    },

                    "columns": [
                        { 'data': 'PayerName' },
                        { 'data': 'HealthPlan' },
                        { 'data': 'Address1' },
                        { 'data': 'Address2' },
                        { 'data': 'StreetAddress' },
                        { 'data': 'POBOX' },
                        { 'data': 'City' },
                        { 'data': 'State' },
                        { 'data': 'Zipcode' }
                    ],
                    "processing": true
                });

The problem in the above scenario I am able to return the recordsFiltered, draw, recordsTotal and display those details in the web page

Please please let me know if there are any alternate methods to get all the required data for server side data processing

colin

Hi @sajay ,

dataSrc should be under the Ajax object, it should be ajax.dataSrc.

If that doesn't help, we're happy to take a look. As per the forum rules, if you could link to a running test case showing the issue we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

sajay

Hi Colin,

Thank you for the quick response !!

I tried placing the dataSrc under ajax, this time I am not getting any errors.
I placed a alert message to display the parsed jsonData - I get the following alert:
[object Object] and "No matching records found" is binded on the table

But when I return that jsonData.data - the first 10 rows gets binded correctly, sort and search also works perfectly but the total records count doesn't get populated "Showing 0 to 0 of 0 entries (filtered from NaN total entries)" , also page count doesn't get reduced based on the filtered data

Sorry I am not sure how to create a js fiddle test case for a web api 2 fucntionality

var datatableInstance = $('#datatable').DataTable({
"serverSide": true,
"ajax": {
"url": "/Api/HealthPlanTest/GetDetailsJson",
"type": "POST",
"datatype": "JSON",
"dataSrc": function (jsonString) {
var jsonData = JSON.parse(jsonString);
alert(jsonData);
return jsonData;
},
},

                "columns": [
                    { 'data': 'Name' },
                    { 'data': 'ID' },
                    { 'data': 'Address1' },
                    { 'data': 'Address2' },
                    { 'data': 'StreetAddress' },
                    { 'data': 'POBOX' },
                    { 'data': 'City' },
                    { 'data': 'State' },
                    { 'data': 'Zipcode' }
                ],
                "processing": true
            });

sajay

It worked - Instead of sending the response as json string from server controller, I converted it to json object by encoding it with utf-8

JavaScriptSerializer js = new JavaScriptSerializer();
HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.OK);
response.Content = new StringContent(js.Serialize(result), Encoding.UTF8, "application/json");
return response;

Now we can remove the dataSrc option and it worked