Print subtotals on each page with HTML/CSS/JS maybe XSLT?

Question

I would like to use the open standards for printing reports, this report would need to have subtotals on the end of each page.

The thread Use of XSL-FO, CSS3 instead

Answer 1

This can be done with plain old JavaScript, as demonstrated by the code below.

  
    

      
MY TABLE
      

        

          
Col 1
Col 2
        
      
      

        
1
1
0
99
1
1
0
99
1
1
0
99
        
2
9
2
88
2
0
2
88
2
0
2
88
        
3
1
4
77
3
1
4
77
3
1
4
77
        
4
8
6
66
4
1
6
66
4
1
6
66
        
5
1
8
55
5
1
8
55
5
1
8
55
        
6
7
0
44
6
2
0
44
6
2
0
44
        
7
1
2
33
7
1
2
33
7
1
2
33
        
8
6
4
22
8
3
4
22
8
3
4
22
        
9
1
6
11
9
1
6
11
9
1
6
11
        
1
0
0
99
1
4
0
99
1
4
0
99
        
2
1
2
88
2
1
2
88
2
1
2
88
        
3
1
4
77
3
1
4
77
3
1
4
77
        
4
5
6
66
4
5
6
66
4
5
6
66
        
5
1
8
55
5
1
8
55
5
1
8
55
        
6
4
0
44
6
6
0
44
6
6
0
44
        
7
1
2
33
7
1
2
33
7
1
2
33
        
8
3
4
22
8
7
4
22
8
7
4
22
        
9
1
6
11
9
1
6
11
9
1
6
11
        
1
2
0
99
1
8
0
99
1
8
0
99
        
2
1
2
88
2
1
2
88
2
1
2
88
        
3
0
4
77
3
9
4
77
3
9
4
77
        
4
1
6
66
4
1
6
66
4
1
6
66
        
5
1
8
55
5
0
8
55
5
0
8
55
        
6
1
0
44
6
1
0
44
6
1
0
44
        
7
0
2
33
7
1
2
33
7
1
2
33
        
8
1
4
22
8
1
4
22
8
1
4
22
        
9
0
6
11
9
2
6
11
9
2
6
11
        

      
    
  

What the Javascript function does is create a print-only version of the table in which every row has a hidden subtotals row attached to it. The subtotals row is covered up by the next row, so it's only visible if the next row gets bumped to the next page, or it's the last row in the table. This should work in just about any browser regardless of paper size. It may seem inefficient, but the perceived performance hit is negligible since the print table doesn't render on page load. Still, I wouldn't recommend this technique for tables with many thousands of rows.

Note that the above code is just a proof-of-concept, and as such, is not particularly robust. A few things that I know will break it are:

• empty cells in data columns
• non-numeric values in data columns
• multi-line content in tbody cells
• varying cell count in tbody rows (e.g. some have colspans and others don't)
• letting cell content determine column width
• changing line-height or border-width without changing other, related CSS values

Some of these things are doable with the right modifications to the JavaScript and CSS.