DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

How to amend code to % rather than addition

How to amend code to % rather than addition

atatayloratataylor Posts: 35Questions: 7Answers: 0
in Free community support

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.

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 20,268Questions: 26Answers: 4,765

    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

  • atatayloratataylor Posts: 35Questions: 7Answers: 0

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

  • kthorngrenkthorngren Posts: 20,268Questions: 26Answers: 4,765
    Answer ✓

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

    Kevin

  • AlexHales2345AlexHales2345 Posts: 1Questions: 0Answers: 0

    Another sample site is Modapk

  • atatayloratataylor Posts: 35Questions: 7Answers: 0

    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.

  • kthorngrenkthorngren Posts: 20,268Questions: 26Answers: 4,765
    Answer ✓

    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

  • atatayloratataylor Posts: 35Questions: 7Answers: 0

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

    Regards Alan

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.