up vote 2 down vote favorite
1

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.

enter image description here

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.

enter image description here

Any ideas ?

Thanks

share|improve this question
    
Your param model is not initialized for some reason. Try to check request parameters in browser, using developer tools. Also, try to change the argument name - maybe you have another request parameter called param. – Miroslav Popovic Jul 5 '12 at 16:07
    
changed my source to sAjaxSource: 'GetCompanies'. Now it is working. Do you know what might cause this ? btw thanks for directing me. – emre nevayeshirazi Jul 5 '12 at 16:23
    
Not a problem. Just 'GetCompanies'? No @Url.Action call? That should work if you are currently on /Company page... then /Company/GetCompanies should be requested. Not sure why it's not working with @Url.Action. – Miroslav Popovic Jul 5 '12 at 16:40
up vote 2 down vote accepted

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.

share|improve this answer
    
Thanks for answer. I am using param.sEcho to return the sEcho value but the controller receives it as null, this is why it is null in response. Do you have any idea why it is null ? – emre nevayeshirazi Jul 5 '12 at 15:31
    
@emrenevayeshirazi That's strange... How does your request look like? Does it send sEcho parameter? – Miroslav Popovic Jul 5 '12 at 15:37
    
as far as I know, you don't explicitly make requests. plugin initialization code has the URL 'Company/GetCompanies', and it makes first request to that action method when it is being initialized. Am I missing something ? – emre nevayeshirazi Jul 5 '12 at 15:40
    
@emrenevayeshirazi yes, but you can see both request and response using browser developer tools, like Firebug in Firefox. – Miroslav Popovic Jul 5 '12 at 15:45
    
And also, you could set a breakpoint in your action method and check the values there. – Miroslav Popovic Jul 5 '12 at 15:45
up vote 0 down vote

Probably way too late for the OP, but I'm guessing you were using version 1.10 of DataTables?

The incoming parameters are quite different from earlier version which is why the custom object in that tutorial (jQueryDataTableParamMode) is not having any values bound to it's properties.

At this time, the up-to-date documentation for version 1.10 for the incoming variables is enter link description here

You can see this talks about a variable called "draw" which replaces the old "sEcho"

The same documentation page for version 1.9 or earlier is here

Furthermore here is a comparison list for upgrading from 1.9 to 1.10

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.