Question

I am trying to use JQuery Datatable plugin in ASP.NET MVC application. However, although my controller returns JSON data to plugin, the table shows a Loading... message and stuck there.

This is my controller,

public ActionResult GetCompanies(jQueryDataTableParamModel param)
{
   return Json(new
   {
       sEcho = param.sEcho,
       iTotalRecords = 97,
       iTotalDisplayRecords = 3,
       aaData = new List<string[]>() {
           new string[] {"1", "a1", "a2", "a3"},
           new string[] {"2", "b1", "b2", "b3"},
           new string[] {"3", "c1", "c2", "c3"}
           }
       }, JsonRequestBehavior.AllowGet);     
}

This is the initialization of datatable plugin.

$('#companyDataTable').dataTable({
    bProcessing: true,
    sAjaxSource: '@Url.Action("GetCompanies", "Company")'
});

This is the screenshot of my table.

This is the JSON data returned to plugin from Company/GetCompanies

{ "sEcho":null,
  "iTotalRecords":97,
  "iTotalDisplayRecords":3,
  "aaData":[ ["1","a1","a2","a3"],
             ["2","b1","b2","b3"],
             ["3","c1","c2","c3"]
           ]
}

jQuerDataTableParamModel is a class which is shown here. I also tried answers on this question but none of them are working for me.

EDIT :

This is how plugin request looks like.

Any ideas ?

Thanks

Answer 1

You need to return the same sEcho value that your request had. In your response, “sEcho” value is null, so DataTables cannot connect request with response.

From DataTables documentation:

sEcho An unaltered copy of sEcho sent from the client side. This parameter will change with each draw (it is basically a draw count) –
so it is important that this is implemented. Note that it strongly
recommended for security reasons that you ‘cast’ this parameter to an
integer in order to prevent Cross Site Scripting (XSS) attacks.