Using DataTables how to display a running total of an amount entered in each row?

Question

http://live.datatables.net/dalogaci/1/edit

I have an amount of money to be dispersed and am using DataTables to display a list of people and allow entry of an amount next to each person (their share of the disbursement). I want to provide a running total of the amount entered into the table so I can warn when the total to be dispersed has been reached or passed.

Kind regards,

Glyn

score 1 · Accepted Answer · answered Aug 15 '20 at 18:23

You can use the following approach.

In my case, I display the running total in a <div>, rather than an input box, as the value is only for display purposes:

<div id="showsum">Grand Total: $0.00</div>

The end result:

The script for this - which I have tried to explain with comments in the code:

<script type="text/javascript">

// define the table variable here so the doSum()
// function will have access to it, when needed:
var table;

// reads each value from the final column in the table, checks
// if the value is a number (as opposed to blank), and then 
// keeps a running total. Ensure we round fractions of pennies
// as needed.
//
// When handling money, use a big number library - see this:
// https://stackoverflow.com/questions/1458633/how-to-deal-with-floating-point-number-precision-in-javascript
//
function doSum() {
  //var foop = table.columns(5).nodes().to$();
  var sum = 0.0;
  // this gets each node (cell) in the final column:
  table.columns(5).nodes().to$()[0].forEach(function (item) {
    // see if the display value is a number (i.e. not blank):
    var amt = parseFloat($('input', item ).val());
    if (!isNaN(amt)) {
        sum += amt;
    }
  });
  // round and display to 2 decimal places:
  sum = (Math.round((sum + Number.EPSILON) * 100) / 100).toFixed(2);
  $('#showsum').text("Grand Total: $" + sum);
}

  $(document).ready(function() {

    table = $('#example').DataTable( {
      "columnDefs": [ {
        "targets": 5,
        "data": function ( row, type, val, meta ) {
          // note the use of onchange="doSum()" in the following:
          return '<input type="number" min="0" max="99999.99" step=".01" placeholder="0.00" onchange="doSum()">';
        }
      } ]
    } );

} );

</script>

For a change to be added to the grand total, you have to hit "enter", or click outside of the input field, if you type the value in manually.

Because you are dealing with money, the code should really be using a "big number" format to eliminate the risk of inaccuracies in fractions of pennies (due to limitations in floating point arithmetic). For example see here.

Final note: I see this question was down-voted. I think that may have been because you only link to your demo code, instead of showing the relevant parts in the question itself. The link to the demo is useful - but showing code in the question itself is generally a "must-do", I think.

Using DataTables how to display a running total of an amount entered in each row?

1 Answers1