Server-side sorting and embedded content

ddewaele

I'm in the process of converting a couple of my tables to server-side processing (pagination / sorting).
I've prepared the backend to accept the various DataTables params required and its working fine. I did want to see a couple of doubts verified.

The backend call requires authorization so I implemented it like this :

[code]
"bProcessing": true,
"bServerSide": true,
"sAjaxSource":"/interactions/" + options.id,
"fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
oSettings.jqXHR = $.ajax( {
"dataType": 'json',
"type": "GET",
"beforeSend" : function(xhr) {
xhr.setRequestHeader('Authorization',authUtils.make_base_auth(username, password));
},
"url": sSource,
"data": aoData,
"success": fnCallback
} );
}
[/code]

My HTML code before the move to server-side processing looked like this

[code]



Tijd
Type



<% _.each(interactions, function(interaction) { %>

<%= dateUtil.convertDate(interaction.contactedDate) %>
<%= interaction.type %>
<%= interaction.softwareVersion %>
<%= interaction.contactedMileageRounded %> km
<%= (interaction.vehicleMetrics && interaction.vehicleMetrics.mileageInKmOneDecimalRounded > 0) ? interaction.vehicleMetrics.mileageInKmOneDecimalRoundedAsString + ' km' : '' %>

<% }); %>


[/code]

As you can see I'm not using the AJAX integration but rather a DOM approach.
The backend call that returns the data for this table (the interactions) is decoupled for DataTables. DataTables doesn't drive this. So here DataTables simply acts as an overlay to the html table to facilitate paging / sorting / searching ...


When I moved to server-side processing I re-used the same data-structure so I assumed I wouldn't need any changes in the HTML above.

However I noticed that in the case of server-side processing, the AJAX datasource is more tightly coupled and DataTables expects either a JavaScript array (default), or a Javascript object structure to be returned that would be automatically injected into the table.

So if I understand correctly I won't be able to re-use the html snippet above but would have to empty the tbody element and rely on the mData and mRender properties to format and inject the data in the table like this:

[code]
"aoColumns": [
{ "mData": "contactedDate","mRender": function(data, type, full) { return dateUtils.convertDate(data)} },
{ "mData": "type","mRender":function(data, type, full) { return "" + data + "" } },
{ "mData": "softwareVersion" },
{ "mData": "contactedMileageRounded" },
[/code]

I like the fact that DataTables handles the AJAX calls and the mData property allows me to reference the data in an easy way, but I don't like the html markup being returned in the mRender funcion. I would like to keep that rendering in the HTML.

I such a thing possible ?