user2550641 user2550641 - 5 days ago 4
Javascript Question

JavaScript: Datatables serverside processing - change values before display



For displaying my data in a table, I use the dataTable plugin. As I have a big amount of data, I use the serverside processing. My problem is, that I have some data fields in my obtained JSON, that I would like to change before i display it in the table.



Example: I get values, whether some equipment is available or not. This is written as "", 0 or 1 in datasbase, for displaying it I would like to convert these values to "Yes" or "No" or "N/A".



To initialise the table I use the following code:

table = $('#table').DataTable({
"ajax": "myurl",
"sPaginationType": "full_numbers",
"sAjaxDataProp":"",
"deferRender": true,
columns: [
{data: 'attributes.0.value'},
{data:'attributes.1.value'},
{data:'attributes.2.value'},
{data:'attributes.3.value'},
{data:'attributes.4.value'}],
});


To bind the conerting function directly in the data array doesn't work (like

{data: convert(attributes.0.value)},


There are some parameters for the datatable plugin, which I tried, but I'm not sure, if they can solve my problems. This is an example from the documentation of the plugin:

$('#example').dataTable( {
"ajax": {
"url": "data.json",
"data": function ( d ) {
d.extra_search = $('#extra').val();
}
}
});



Can I use the data parameter to solve my problems (when I tried this, d is always empty) or it there another possibility to change my values before I integrate them in a table?

Answer

You could preprocess the JSON in an ajax.dataSrc function, but since you really just need to modify how the values are shown I would go for column rendering :

columns: [
   { data: 'attributes.0.value',
     render: function(data, type, row) {
        switch(data) {
           case '0' : return 'No'; break;
           case '1' : return 'Yes'; break; 
           default : return 'N/A'; break;
        }
   },
   { data: 'attributes.1.value' },
   { data: 'attributes.2.value' },
   { data: 'attributes.3.value' },
   { data: 'attributes.4.value' }
]

Use the above render method to each of the column values you need to convert.

Comments