I can't get my DataTable to render data returned via JSON

greattall1

Hi,

I have followed the usage section of the documentation to set up a custom call for my server-side processing (fnServerData / sAjaxSource). I have also verified the JSON data that my call returns, as per the FAQ. The ajax call is successfully being executed by the datatable. Do I need to do anything in the callback from .getJSON? I tried calling fnDraw() in there, but it seemed to be making another ajax call when I did that, thus going into an infinite recursion. Here is my JSON:

[code]
{
"sEcho":1,
"iTotalRecords":11,
"iTotalDisplayRecords":10,
"aaData":[
["1","Ethics 103","","2.25","RATING","$400.00"],
["2","Ethics 101","","0","RATING","$500.00"],
["3","Group 2 CD ROM","","0","RATING","$200.00"],
["4","Group 1 Webcast","","5.5","RATING","$150.00"],
["5","Single Location","","0","RATING","$250.00"],
["6","Group 2 CD ROM","","0","RATING","$150.00"],
["7","Multi_One","","0","RATING","$99.00"],
["8","Group 2 CD ROM","","0","RATING","$25.00"],
["9","Gold Subscription","","0","RATING","$649.99"],
["10","Evidence and Expert Testimony Best Practices: Supporting Your Case","","0","RATING","$150.00"]]}
[/code]

And here is the javascript where I set up my DataTable - I know my HTML is correct, I have included the and tags. There is some ASP mixed in there, as there are a few elements that have to be dynamically set when the page is rendered by ASP.

[code]
$(document).ready(function() {
$('#<%=Model.Id%>').dataTable({
"bJQueryUI" : true,
"bAutoWidth": true,
"bFilter": false,
"bSort": false,
"bInfo": false,
"bLengthChange": true,
"bPaginate": true,
"sPaginationType" : "two_button",
"bProcessing": false,
"bServerSide": true,
"sDom" : 'lp<"clear">t',
"sAjaxSource": "<%=ResolveUrl("~/Search/Paginate") %>",
"fnServerData": function(sSource, aoData, fnCallback) {
//aoData[0] - sEcho
//aoData[3] - iDisplayStart
//aoData[4] - iDisplayLength
$.getJSON(sSource,
{ echo: aoData[0].value,
pageNumber: aoData[3].value,
resultsPerPage: aoData[4].value,
groupLabelId: "<%=Model.GroupLabelId%>",
categoryId: "<%=Model.CategoryId %>",
creditTypeId: "<%=Model.CreditTypeId %>"
}, function(data){
alert('got here');
});
}
});
});
[/code]

I'm sure there must be something simple that I am overlooking. Is my JSON wrong?

allan

Hi greattall1,

You need to call fnCallback() in the 'complete' function (3rd argument) - as shown in this example: http://datatables.net/examples/server_side/custom_vars.html

Hopefully that will do it for you.

Regards,
Allan

greattall1

do'h thanks so much. I had a feeling it would be simple!