How To Add totals to a DT::datatable?

Question

I am trying to add totals to a data table footer. Using code from different sources, I wrote the following application using Shiny. The problem is, when I run it, the follow

Answer 1

This is a version without using Shiny. I used the same JavaScript as @gscott above, but this is for a standalone table. I used this in a RMarkdown document. The key to this, which I struggled with, is the container argument, which adds the footer to the table.

library(htmlwidgets)
library(DT)
library(htmltools)

sketch <- htmltools::withTags(table(
  tableHeader(colnames(mtcars)), 
  tableFooter(c(0,0,0,0,0,0,0,0,0,0,0,0))
))

jsCode <- "function(row, data, start, end, display) {
  var api = this.api(), data;
  total = api.column(7, {page: 'current'}).data().reduce( function(a, b) { return a + 
b}, 0);
  total2 = api.column(6, {page: 'current'}).data().reduce( function(a, b) { return a 
+ b}, 0);
  total3 = api.column(2, {page: 'current'}).data().reduce( function(a, b) { return a 
+ b}, 0);
  $( api.column(7).footer() ).html('Total: ' + total.toFixed(2));
  $( api.column(6).footer() ).html('Total: ' + total2.toFixed(2));
  $( api.column(2).footer() ).html('Total: ' + total3.toFixed(2))
  }"

DT::datatable(mtcars, container = sketch, options=list(scrollY=300, scrollX=TRUE, scroller=TRUE, footerCallback = JS(jsCode)))