CODEWITHSUNDEEP
javascriptjqueryajaxdatatables
user2550641
user2550641

Reputation: 347

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?

Upvotes: 3

Views: 2339

Answers (1)

davidkonrad
davidkonrad

Reputation: 85528

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.

Upvotes: 6

Related Questions