How to amend code to % rather than addition

atataylor

I am looking for a solution to calculate a percentage between two columns in a table. I found this section of code on this site, and wondered if it could be amended:

"createdRow": function( row, data, dataIndex ) {
      $('td:eq(4)', row).addClass("sumMe");
      $('td:eq(5)', row).addClass("sumMe");
          var mySum = 0;
          $('td.sumMe', row).each(function() {
            mySum += parseInt( $(this).html(), 10);    
          });
         $('td:eq(7)', row).text(mySum);    
    },

This code adds the values of two columns, 4 and 5 and puts the result in column 7. I was looking to change formula to create a percentage calculation rather than an addition. I also wanted to do the same calculation on columns 4 and 6 and place the second result in column 8. Any help would be appreciated.

kthorngren

My suggestion is to use -potion columns.render instead of columns.createdRow to calculate two columns. This example shows how to access th data for the full row to perform the calculation.

Kevin

atataylor

Thanks Kevin, but I am unsure how to use the information, I do struggle with datatables

kthorngren

Here is a simple example:
http://live.datatables.net/dehuveca/1/edit

Kevin

AlexHales2345

Another sample site is Modapk

atataylor

Thanks for that Kevin I now understand it a bit better and have it working in my table, thanks to your help. I am trying to run two similar versions which I can run ok separately but when I try to combine them only the last block of code produces a result. Below is the code I tried, am I on the right track?

$(document).ready( function () {
  var table = $('table').DataTable({
    columnDefs: [
      {
        targets: 7,
        render: function (data, type, row) {
          return (row[5] / row[4] * 100).toFixed(2) + '%';
        }
      }
    ],
        
      
      columnDefs: [
      {
        targets: 8,
        render: function (data, type, row) {
          return (row[6] / row[4] * 100).toFixed(2) + '%';
        }
      }
    ]
  });
} );    

Thanks again for your help I really appreciate it.

kthorngren

The second option is overwriting the first. Think of columnDefs as a keyword, only one can exist. You need to combine them into one option, like this:

    columnDefs: [
      {
        targets: 7,
        render: function (data, type, row) {
          return (row[5] / row[4] * 100).toFixed(2) + '%';
        }
      },
      {
        targets: 8,
        render: function (data, type, row) {
          return (row[6] / row[4] * 100).toFixed(2) + '%';
        }
      }
    ]

Kevin

atataylor

Thank you Kevin, I need to spend more time with JavaScript, not just datatables. Thanks again for all your help.

Regards Alan