Brief background: I need to be able to create a DataTable with a set of columns that comes from a configuration elsewhere in the system. In order to dynamically create the DataTables table I have piggybacked the DataTable init on the return from the "get columns" AJAX request. Up to this point everything is working.
The problem occurs when I attempt to add display rendering. It is not applied. In fact, the rendering functions are never called leading me to believe that it is unable to locate them. I use the columnDefs parameter on DataTables init to attempt to apply the display formatting based on class. Below is a simplified use case:
HTML:
<table id="adjustmentRequests" class="stripe"></table>
Javascript:
$.ajax( {
url: "getDisplayColumns",
type: "GET",
"data": {
"dataStoreName": "test"
}
}).done( function( displayColumns ) {
var requestTable = $( '#adjustmentRequests' ).dataTable( {
"jQueryUI": true,
"paging": false,
"searching": false,
"info": false,
"processing": true,
"ajax": {
"url": "getData",
"data": {
"itemId": "1234"
}
},
"columns": displayColumns,
"columnDefs": [
{ // Date columns
"targets": "date",
"render": function( data, type, row ) {
if( data == "1/1/1900" ) {
return null;
}
return data;
}
},
{ // Money columns
"targets": "money",
"render": function( data, type, row ) {
var className = new Number( data ) > 0 ? "positiveAmount" : "negativeAmount";
return "<span class='" + className + "'>" + data + "</span>";
}
}
],
"language": { "emptyTable": "<span style='font-style:italic'>No adjustments requested.</span>" }
});
});
Example response from getDisplayColumns:
[
{"name":"Code","orderable":true,"searchable":true,"title":"Code","visible":true},
{"className":"money","name":"Amount","orderable":true,"searchable":true,"title":"Amount","type":"num","visible":true},
{"className":"date","name":"Requested On","orderable":true,"searchable":true,"title":"Requested On","type":"date","visible":true}
]
Example response from getData:
[
[42, 23410000.00, 02/25/2015],
[A1134, -42.70, 02/24/2015]
]
Why is DataTables unable to perform the format rendering? Does it have to do with the columns coming from AJAX instead of the DOM? Have I missed something else?
Any assistance would be appreciated.