Drupal 7: jQuery and Subtotaling Views Calc Tables

As a follow up to Drupal 6: Using jQuery to pick up where views_calc falls short, I worked on a project this week that used views_calc in D7 and we wanted to leverage the same subtotaling that I demonstrated in D6.

There are a lot of similarities in the code so it didn’t take much tweaking.

Here’s a look at a table with some elements highlighted: A screenshot of the table with some highlights of the differences.
The server calculated totals are in the green bar and you can see the correlation between those and the subtotals in the grey table. In addition, each sub-totaled column (noted with the yellow underline) adds up; which is nice.

Compare that to the table with javascript disabled:
Screen Shot of the table with javascript turned off
Green and grey totals don’t match and the subtotals are not correct.

Below is the code. You’ll see two Drupal.behaviors functions. Drupal.behaviors.sumCarryForward() runs any time a js action is triggered (and on page load). It calls Drupal.behaviors.sumCarryForwardSubTotal() which is the routine that calculates the total and pushes the sum to the relevant subtotal cell.

/* ######################## Helper function for Auto Calc jquery for cfba/ledger/edit/... ######################## */
(function ($) {
  Drupal.behaviors.sumCarryForwardSubTotal = function(colsToSumClassArray, selectedThis) {
      if(typeof colsToSumClassArray !== 'undefined' && (colsToSumClassArray.toString().indexOf('HTMLDocument')== -1) && typeof selectedThis !== 'undefined'){
          //console.log(colsToSumClassArray+', '+selectedThis);
        for(data_and_total_class_inc = 0; data_and_total_class_inc < colsToSumClassArray.length; data_and_total_class_inc++){
          data_and_total_class = colsToSumClassArray&#91;data_and_total_class_inc&#93;;
          //console.log('data_and_total_class: '+data_and_total_class);
          //run only if there is a data_and_total_class var
          var sum = parseFloat(0);
          $('table.views-table tr:not(.view-fop-subtotal, .view-footer-number)', selectedThis).each(function(){
            var curVal = 0;
            //sum input and non-input fields
            //console.log('length: '+$('td.' + data_and_total_class + ' input', this).length);
            if($('td.' + data_and_total_class + ' input', this).length > 0){
              curVal = parseFloat($('td.' + data_and_total_class + ' input', this).val().replace(',', ''));
              //console.log('input cell: '+curVal);
            }else{
              curVal = parseFloat($('td.' + data_and_total_class, this).text().replace(',', ''));
              //console.log('No input in this cell: '+curVal);
            }
            if(jQuery.isNumeric(curVal)){
              sum += curVal;
            }
          });//end $('form table.views-table tr:not(.view-footer-number)', this).each(function()
          //console.log('sum: '+sum);
          //console.log('.views-field-field-vr-fop table.views-table .view-fop-subtotal td.' + data_and_total_class+' , this).html(sum): '+$('.views-field-field-vr-fop table.views-table .view-fop-subtotal td.' + data_and_total_class , this).html());
          $('.views-field-field-vr-fop table.views-table .view-fop-subtotal td.' + data_and_total_class , selectedThis).html(sum);

        }//end for each
      }//end typeof data_and_total_class !== undefined...
    }//end Drupal.behaviors function(data_and_total_class)
})(jQuery);

/* ######################## END Helper function for Auto Calc jquery for cfba/ledger/edit/... ######################## */

/* ######################## Auto Calc jquery for cfba/ledger/edit/... ######################## */
(function ($) {
  Drupal.behaviors.sumCarryForward = {
    attach: function(context) {
      //run only if there is a context var
      if(typeof context !== 'undefined'){
        //Sum the value of each carry forward input field and put the total in the carry forward header
        if($('body').hasClass('page-cfba-ledger')) {
          //console.log('hasClass page-cfba-ledger');
          $('.views-row').each( function(){
            //get the value of each column and then total with Drupal.behaviors.sumCarryForwardSubTotal('data_and_total_class')
            colsToSumArr = Array();
            //console.log($('form table.views-table .view-footer-number td.views-field-field-cf-budget', this).html());
            colsToSumArr = Array('views-field-field-adjusted-budget','views-field-field-actual-budget-used','views-field-field-budget-balance','views-field-field-cf-budget')
            //console.log('typeof colsToSumArr: '+typeof colsToSumArr);
            Drupal.behaviors.sumCarryForwardSubTotal(colsToSumArr, this);
         });//end $('.views-row').each( function()
        }//end if($('body').hasClass('page-cfba-ledger'))
      }//end typeof context !== und
    }//end function(context)
  }//end Drupal.behaviors
})(jQuery);
/* ######################## End Auto Calc jquery for cfba/ledger/edit/... ######################## */

It’s working great!

Leave a Comment