plugin doesn't understand jsonresult type from mvc controller?

surfguy

I have a ASP.NET MVC application whereby the MVC controller method returns a jsonresult or json object.

How do I need to bridge the gap between the json this plug-in expects and what MVC is returning?

Here is an example of the jsonresult from MVC:

[{"STORE":"0112"},{"STORE":"0113"}]

This compared to what the DataTable plug-in seems to want:

{ "aaData": [["0112"],["0113"]] }

What is the best way to bridge this gap between a MVC jsonresult and this plug-in? I guess json comes in various forms. I dunno...I'm a noob. I was kind of hoping the plug-in would understand the MVC jsonresult as is...but that was wishful thinking on my part I guess. Or, is there something I'm missing? Anyone working with ASP.NET MVC and/or this plug-in have any input?

allan

Hi surfguy,

Json is much like XML in that it's a data transfer method, structured according to particular rules. Like in XML an application using Json needs to know the formatting (schema) of what the data being passed to it is. This is why DataTables is tripping up over your data - as you rightly point out, DataTables expects the second formatting rather than all these "STORE" parameters (... ;-) ).

So what you need to do is convert from one type to the other. On the client-side this could be done by making the Ajax call to get the data yourself (assuming you are not using server-side processing, if you are then you'll need to use a custom 'get' function for the data) and then format it into the array that DataTables wants. From there you can use the aaData parameter to pass your formatted array into DataTables at initialisation time.

Hope this helps!
Allan

surfguy

Thanks! Okay...so now I have done a jquery ajax call and have created a variable named aaData from the JsonResult which contains:

{ "aaData": [["0112"],["0113"]] }

To initialize the table, I was thinking all I had to do was this but it isn't working:

$('#example').dataTable(aaData);

I'm probably missing something dumb or that is incorrect.

allan

Almost there - have a look at this example which shows loading data into a table from an array: http://datatables.net/examples/example_dynamic_creation.html

$('#example').dataTable( { "aaData": aaData } );

should probably do it.

Allan

surfguy

that was real close but needed an eval():

$('#example').dataTable( { "aaData": eval(aaData) } );

My table was already defined on the page with a header/footer. But, if I don't specify the "aoColumns", then it is rendering null for the header columns. Any way you know of to avoid having to specify "aoColumns" when they are already defined in the thead? it seems like i have a hybrid solution as in the example you are creating the html table in script whereas mine is defined on the page but with no row data until i make the ajax call, format the data, and associate the data to the plugin.

surfguy

on second thought, it's probably not a good idea to lay out the table ahead of time and then bind data to the plugin. i should probably be doing it the way your example does it. rendering an empty table prior to the data being loaded is not exactly ideal. lol

allan

Yup - DataTables needs to know about the columns. You can either give it this information with aoColumns or the HTML. Depends on the situation as to which one is best.

Allan