library(DT)
d <- structure(list(ie_8_lower = c(0, 1, 1, 0, 0, 1, 1, 0), ie_9_higher = c(0,
1, 0, 1, 0, 1, 0, 1), other = c(0, 1, 0, 0, 1, 0, 1, 1), buyers = c(4,
2830, 123934, 2122766, 14346811, 10338, 37112, 357695), gmb_usd = c(640.25,
1606175.85, 10970296.87, 192057195.09, 1215378720.43, 2250239.71,
8800844.81, 72972772.59), buyer_share_pct = c(0, 0.02, 0.73,
12.49, 84.39, 0.06, 0.22, 2.1), gmb_share_pct = c(0, 0.11, 0.73,
12.77, 80.81, 0.15, 0.59, 4.85)), class = "data.frame", row.names = c(NA,
-8L), .Names = c("ie_8_lower", "ie_9_higher", "other", "buyers",
"gmb_usd", "buyer_share_pct", "gmb_share_pct"))
sketch <- htmltools::withTags(table(
tableHeader(d),
tableFooter(d)
))
opts <- list(
footerCallback = JS(
"function( tfoot, data, start, end, display ) {",
"var api = this.api();",
"$( api.column( 5 ).footer() ).html(",
"api.column( 5 ).data().reduce( function ( a, b ) {",
"return a + b;",
"} );",
");",
"}"))
datatable(d, container = sketch, options = opts)
When this renders I do not see any table displayed to the browser - the html that is generated looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="lib/htmlwidgets-0.3.2/htmlwidgets.js"></script>
<script src="lib/jquery-1.11.1/jquery.min.js"></script>
<link href="lib/datatables-1.10.5/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="lib/datatables-1.10.5/js/jquery.dataTables.min.js"></script>
<script src="lib/datatables-binding-0.0.21/datatables.js"></script>
</head>
<body style="background-color:white;">
<div id="htmlwidget_container">
<div id="htmlwidget-2225" style="width:100%;height:auto;" class="datatables"></div>
</div>
<script type="application/json" data-for="htmlwidget-2225">{ "x": {
"data": [
[ "1", "2", "3", "4", "5", "6", "7", "8" ],
[ 0, 1, 1, 0, 0, 1, 1, 0 ],
[ 0, 1, 0, 1, 0, 1, 0, 1 ],
[ 0, 1, 0, 0, 1, 0, 1, 1 ],
[ 4, 2830, 123934, 2122766, 14346811, 10338, 37112, 357695 ],
[ 640.25, 1606175.85, 10970296.87, 192057195.09, 1215378720.43, 2250239.71, 8800844.810000001, 72972772.59 ],
[ 0, 0.02, 0.73, 12.49, 84.39, 0.06, 0.22, 2.1 ],
[ 0, 0.11, 0.73, 12.77, 80.81, 0.15, 0.59, 4.85 ]
],
"isDF": true,
"container": "<table>\n <thead>\n <tr>\n <th>ie_8_lower</th>\n <th>ie_9_higher</th>\n <th>other</th>\n <th>buyers</th>\n <th>gmb_usd</th>\n <th>buyer_share_pct</th>\n <th>gmb_share_pct</th>\n </tr>\n </thead>\n <tfoot>\n <tr>\n <th>ie_8_lower</th>\n <th>ie_9_higher</th>\n <th>other</th>\n <th>buyers</th>\n <th>gmb_usd</th>\n <th>buyer_share_pct</th>\n <th>gmb_share_pct</th>\n </tr>\n </tfoot>\n</table>",
"options": {
"footerCallback": "function( tfoot, data, start, end, display ) {\nvar api = this.api();\n$( api.column( 5 ).footer() ).html(\napi.column( 5 ).data().reduce( function ( a, b ) {\nreturn a + b;\n} );\n);\n}",
"columnDefs": [
{
"orderable": false,
"targets": 0
},
{
"className": "dt-right",
"targets": [ 1, 2, 3, 4, 5, 6, 7 ]
}
],
"order": [],
"autoWidth": false
},
"callback": "function(table) {\nreturn table;\n}",
"colnames": [ " ", "ie_8_lower", "ie_9_higher", "other", "buyers", "gmb_usd", "buyer_share_pct", "gmb_share_pct" ]
},"evals": [ "options.footerCallback", "callback" ] }</script>
<script type="application/htmlwidget-sizing" data-for="htmlwidget-2225">{ "viewer": {
"width": "100%",
"height": "auto",
"padding": 15,
"fill": false
},"browser": {
"width": "100%",
"height": "auto",
"padding": 40,
"fill": false
} }</script>
</body>
</html>