Datatables Plugin Sum Function

Question

I have a datatable with a column of checkboxes. When the user clicks checkboxes, a running total(sum) is calculated.

Anytime I use the pagination to "page" over to another page, the table is redrawn in the dom. This means the sum starts over at 0, as opposed to the sum of any checkboxes that were checked on previous pages.

How do I save the sum in a variable so that it can be used as the starting point on subsequent page sums?

Thanks!

Code

 function init_icheck() { $('#datatable input[type=checkbox]').iCheck({ checkboxClass: 'icheckbox_square-blue', increaseArea: '10%' }); } // When Pay in Full Checkbox is Checked fill in Pay This Time Field with Invoice Amount Due Value function paynow() { var payFull = $('input[type="checkbox"].payfull'); payFull.on('ifChecked', function(event) { $(this).parents('tr').find('.paynow').val($(this).val().replace('$', '')); Calc(); }); } // If Pay in Full Unchecked then remove value from respective Pay This Time Input // Only bind the ifUnchecked event if the checkbox is checked function remove_checkbox() { var payFull = $('input[type="checkbox"].payfull'); payFull.on('ifUnchecked', function(event) { if ($(this).parents('tr').find('.paynow').val() == $(this).val().replace('$', '')) { $(this).parents('tr').find('.paynow').val(''); Calc(); } }); } // If Pay This Time changes recalculate total function recalc_total() { $('.paynow').keyup(function() { var $ThisCheck = $(this).parents('tr').find('.payfull'); // Add Commas if # is over 1,000 $(this).val(addCommas($(this).val())); if ($(this).val() == $ThisCheck.val().replace('$', '')) { $ThisCheck.iCheck('check'); } else { $ThisCheck.iCheck('uncheck'); } Calc(); }); } // Recalc Function function Calc() { var Sum = 0; $('.paynow').each(function(index, Obj) { var value = parseFloat($(this).val().replace(',', '')); if (!isNaN(value)) Sum += value; }); $('#amounttopay').text('$' + Sum.toFixed(2).replace(/\\B(?=(?:\\d{3})+(?!\\d))/g, ',')); } // Add Commas if value > 1,000 addCommas = function(input) { // If the regex doesn't match, `replace` returns the string unmodified return (input.toString()).replace( // Each parentheses group (or 'capture') in this regex becomes an argument // to the function; in this case, every argument after 'match' /^([-+]?)(0?)(\\d+)(.?)(\\d+)$/g, function(match, sign, zeros, before, decimal, after) { // Less obtrusive than adding 'reverse' method on all strings var reverseString = function(string) { return string.split('').reverse().join(''); }; // Insert commas every three characters from the right var insertCommas = function(string) { // Reverse, because it's easier to do things from the left var reversed = reverseString(string); // Add commas every three characters var reversedWithCommas = reversed.match(/.{1,3}/g).join(','); // Reverse again (back to normal) return reverseString(reversedWithCommas); }; // If there was no decimal, the last capture grabs the final digit, so // we have to put it back together with the 'before' substring return sign + (decimal ? insertCommas(before) + decimal + after : insertCommas(before + after)); } ); }; // Calc and update pay this time display Calc(); // Initialize Datatables $('#datatable').dataTable({ "stateSave": true, "oLanguage": { "sSearch": "Search Results:" }, "initComplete": function(settings) { init_icheck(); paynow(); remove_checkbox(); recalc_total(); } }); // Reinitialize iCheck on Pagination Change $('#datatable').on('draw.dt', function() { init_icheck(); paynow(); recalc_total(); remove_checkbox(); }); $('#datatable').on('page.dt', function() { alert('test'); }); 

 /* iCheck plugin Square skin, blue ----------------------------------- */ .icheckbox_square-blue, .iradio_square-blue { display: inline-block; *display: inline; vertical-align: middle; margin: 0; padding: 0; width: 22px; height: 22px; background: url(https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.1/skins/square/blue.png) no-repeat; border: none; cursor: pointer; } .icheckbox_square-blue { background-position: 0 0; } .icheckbox_square-blue.hover { background-position: -24px 0; } .icheckbox_square-blue.checked { background-position: -48px 0; } .icheckbox_square-blue.disabled { background-position: -72px 0; cursor: default; } .icheckbox_square-blue.checked.disabled { background-position: -96px 0; } .iradio_square-blue { background-position: -120px 0; } .iradio_square-blue.hover { background-position: -144px 0; } .iradio_square-blue.checked { background-position: -168px 0; } .iradio_square-blue.disabled { background-position: -192px 0; cursor: default; } .iradio_square-blue.checked.disabled { background-position: -216px 0; } /* Retina support */ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) { .icheckbox_square-blue, .iradio_square-blue { background-image: url(blue@2x.png); -webkit-background-size: 240px 24px; background-size: 240px 24px; } } 

 <link href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.1/icheck.min.js"></script> <table class="table table-bordered" id="datatable"> <thead> <tr> <th>Pay In Full</th> <th>Pay This Time</th> </tr> </thead> <tfoot> <tr class="foot"> <th></th> <th class="text-right"> <h3 class="semibold nm mr5" id="amounttopay">$0.00</h3> </th> </tr> </tfoot> <tbody> <tr> <td class="text-center payinfull"> <input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="109.92" /> </td> <td class="text-center paythistime"> <div class="input-group"> <span class="input-group-addon">$</span> <input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".one" data-parsley-pattern="^\\d+(,\\d{1,2})?$" type="text" />109.92 </div> <span class="one"></span> </td> </tr> <tr> <td class="text-center payinfull"> <input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="6.65" /> </td> <td class="text-center paythistime"> <div class="input-group"> <span class="input-group-addon">$</span> <input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".two" data-parsley-pattern="^\\d+(,\\d{1,2})?$" type="text" />6.65 </div> <span class="two"></span> </td> </tr> <tr> <td class="text-center payinfull"> <input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="16.65" /> </td> <td class="text-center paythistime"> <div class="input-group"> <span class="input-group-addon">$</span> <input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".two" data-parsley-pattern="^\\d+(,\\d{1,2})?$" type="text" />16.65 </div> <span class="two"></span> </td> </tr> <tr> <td class="text-center payinfull"> <input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="109.92" /> </td> <td class="text-center paythistime"> <div class="input-group"> <span class="input-group-addon">$</span> <input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".one" data-parsley-pattern="^\\d+(,\\d{1,2})?$" type="text" />109.92 </div> <span class="one"></span> </td> </tr> <tr> <td class="text-center payinfull"> <input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="6.65" /> </td> <td class="text-center paythistime"> <div class="input-group"> <span class="input-group-addon">$</span> <input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".two" data-parsley-pattern="^\\d+(,\\d{1,2})?$" type="text" />6.65 </div> <span class="two"></span> </td> </tr> <tr> <td class="text-center payinfull"> <input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="16.65" /> </td> <td class="text-center paythistime"> <div class="input-group"> <span class="input-group-addon">$</span> <input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".two" data-parsley-pattern="^\\d+(,\\d{1,2})?$" type="text" />16.65 </div> <span class="two"></span> </td> </tr> <tr> <td class="text-center payinfull"> <input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="109.92" /> </td> <td class="text-center paythistime"> <div class="input-group"> <span class="input-group-addon">$</span> <input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".one" data-parsley-pattern="^\\d+(,\\d{1,2})?$" type="text" />109.92 </div> <span class="one"></span> </td> </tr> <tr> <td class="text-center payinfull"> <input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="6.65" /> </td> <td class="text-center paythistime"> <div class="input-group"> <span class="input-group-addon">$</span> <input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".two" data-parsley-pattern="^\\d+(,\\d{1,2})?$" type="text" />6.65 </div> <span class="two"></span> </td> </tr> <tr> <td class="text-center payinfull"> <input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="16.65" /> </td> <td class="text-center paythistime"> <div class="input-group"> <span class="input-group-addon">$</span> <input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".two" data-parsley-pattern="^\\d+(,\\d{1,2})?$" type="text" />16.65 </div> <span class="two"></span> </td> </tr> <tr> <td class="text-center payinfull"> <input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="109.92" /> </td> <td class="text-center paythistime"> <div class="input-group"> <span class="input-group-addon">$</span> <input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".one" data-parsley-pattern="^\\d+(,\\d{1,2})?$" type="text" />109.92 </div> <span class="one"></span> </td> </tr> <tr> <td class="text-center payinfull"> <input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="6.65" /> </td> <td class="text-center paythistime"> <div class="input-group"> <span class="input-group-addon">$</span> <input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".two" data-parsley-pattern="^\\d+(,\\d{1,2})?$" type="text" />6.65 </div> <span class="two"></span> </td> </tr> <tr> <td class="text-center payinfull"> <input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="16.65" /> </td> <td class="text-center paythistime"> <div class="input-group"> <span class="input-group-addon">$</span> <input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".two" data-parsley-pattern="^\\d+(,\\d{1,2})?$" type="text" />16.65 </div> <span class="two"></span> </td> </tr> <tr> <td class="text-center payinfull"> <input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="109.92" /> </td> <td class="text-center paythistime"> <div class="input-group"> <span class="input-group-addon">$</span> <input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".one" data-parsley-pattern="^\\d+(,\\d{1,2})?$" type="text" />109.92 </div> <span class="one"></span> </td> </tr> <tr> <td class="text-center payinfull"> <input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="6.65" /> </td> <td class="text-center paythistime"> <div class="input-group"> <span class="input-group-addon">$</span> <input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".two" data-parsley-pattern="^\\d+(,\\d{1,2})?$" type="text" />6.65 </div> <span class="two"></span> </td> </tr> <tr> <td class="text-center payinfull"> <input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="16.65" /> </td> <td class="text-center paythistime"> <div class="input-group"> <span class="input-group-addon">$</span> <input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".two" data-parsley-pattern="^\\d+(,\\d{1,2})?$" type="text" />16.65 </div> <span class="two"></span> </td> </tr> </tbody> </table> 

Answer 1

A web page doesn't save the data when you move from one page to another. However, there are multiple way to overcome this.

If you are sticking it Javascript (pure), sessionStorage/localStorage or cookies are the good one. jQuery has the same thing but different name and syntax :) ($.sessionStorage instead of just sessionStorage :) )