Loading Content Into DataTables via JavaScript Array using aaData

thecountofzero

If I am passing the content to DataTables via a JavaScript array using aaData, what is the best way to specify if I want some of that data represented as form elements such as checkboxes, dropdown and textboxes in some of the columns?

Do I have to do it like this?

[code]
$('#example').dataTable( {
"aaData": [
[ "", "Internet Explorer 4.0", "Win 95+" ],
[ "", "Internet Explorer 4.0", "Win 95+" ],
[ "", "Internet Explorer 4.0", "Win 95+"]
],
"aoColumns": [
{ "sTitle": "Engine" },
{ "sTitle": "Browser" },
{ "sTitle": "Platform" }
]
} );
[/code]

Basically what I will be doing is making a call to my server for an array of objects (let's say students) that will be displayed in the table. Now I know I can use sAjaxSource to retrieve the data, but I need to use the data elsewhere in the UI. So my plan is to make the call outside of DataTables and pass the result to DataTables via a JavaScript array (aaData). The thing is, some of this data needs to be represented as form elements as mentioned above. If all of the columns were just straight text, this would be a lot cleaner, but having to inject the html for the form elements into the aaData array just seems off and ugly.

Is there a better way?

I also considered and actually tried, using the retrieved data and generating the HTML for the table using templates and inserting it into the DOM and then telling DataTables to use that table to tranform it into a fancy DataTable. This works, but it is much slower than just passing DataTables the JavaScript array. Passing aaData to DataTables and letting it create the HTML was faster.

Thoughts? Suggestions?


Thanks,
Mike

allan

Interesting that the JS array method is much faster than HTML. Are you using Javascript to construct the HTML, or is the document loaded with a plain HTML in it?

Another option to what you have above is to use fnRender: http://datatables.net/examples/advanced_init/column_render.html . You pass in what you want with aaData and then use fnRender on each column to format the data as needed for the display.

Allan

thecountofzero

Yes, I am using JavaScript to construct the HTML. I am actually using EJS (Embedded JavaScript) templates to generate the HTML. I can pass it the JavaScript array of objects (students) and it will loop over the array and construct the HTML.

http://embeddedjs.com/getting_started.html

[code]




Name
Graduation Year
GPA
Active



<% for(var i = 0; i < students.length ; i++){ %>
>
<%= students[i].name %>
<%= students[i].gradYear%>
<%= students[i].gpa%>
/>

<% } %>



[/code]

I like this flexibility, but need to really evaluate performance.

I will look into the fnRender option.


Thanks,
Mike