Search code examples
jquerytablesorter

tablesorter group subtotal based trigger col 0 add col 1

I am trying to total the AMOUNT column with the vendor column changes. In other words the total of Harry Amount and the total of Mark amount. I would also like to put the total in the amount column under each group.

EDIT - I would really like this to "click" on the column automatically, in other words the subtotal will already be there. sorted by the 1st column but totals in the 2nd column.

What I would like it to look like is this: Sort by column 0 and sub total in column 1

Mark    100.22
        232.12
 Total  342.34

Harry    23.21
         11.11
  Total  34.32

EDIT - Added this DEMO

enter image description here

$("#invoicesraw").tablesorter({
    theme : "blue",

    widgets: [ "group", "columns", "columnSelector", "zebra" ],
    widgetOptions: {




        group_callback    : function($cell, $rows, column, table){
            if (column === 1) {
                var subtotal = 0;
                $rows.each(function(){
                    subtotal += parseFloat( $(this).find("td").eq(column).text() );
                });
                $cell.find(".group-count").append("; subtotal: " + subtotal );
            }
        },
        // event triggered on the table when the grouping widget has finished work
        group_complete    : "groupingComplete",


        columnSelector_container : $('#selector'),
        columnSelector_columns : {
            0: 'disable',
            1: 'disable',
            2: 'disable'
        },
        columnSelector_mediaquery: false
    }
});

This is a sample of the OUTPUT when using the totals, NOTE the group name line is not formatted. 

    Vendor,Amount
"<i></i><span class=“;group-name“;>harry smith</span><span class=“;group-count“;> (5)</span>","<i></i><span class=“;group-name“;>harry smith</span><span class=“;group-count“;> (5)</span>"
Harry Smith,3222.00
Harry Smith,2345.21
Harry Smith,121.00
Harry Smith,1.00
Harry Smith,21.00
Total:,5710.21
"<i></i><span class=“;group-name“;>mark worsnop</span><span class=“;group-count“;> (1)</span>","<i></i><span class=“;group-name“;>mark worsnop</span><span class=“;group-count“;> (1)</span>"
Mark Worsnop,3434.00
Total:,3434.00

I added the outputTable to the demo but its not triggering. Not sure why as thats the same code I have in my test website. I am not very well versed in JSFiddle.

Here is the latest demo HERE

Note sure why but on JSFiddle it looks great. On my test website it adds the names to the CSV like this

    Vendor,Amount
harry smith (5),harry smith (5)
Harry Smith,3222.00
Harry Smith,2345.21
Harry Smith,121.00
Harry Smith,1.00
Harry Smith,21.00
Total:,5710.21
mark worsnop (1),mark worsnop (1)
Mark Worsnop,3434.00
Total:,3434.00
Solution

  • Change the group_callback function as follows (demo):

    group_callback    : function($cell, $rows, column, table){
    if (column === 0) {
        var subtotal = 0;
        $rows.each(function(){
            subtotal += parseFloat( $(this).find("td").eq(1).text() );
        });
        $cell.find(".group-count").append("; total: " + subtotal.toFixed(2) );
    }
}