-->

闪亮的数据表页脚回拨款项(shiny DataTables footer Callback sums

2019-09-30 14:23发布

我正在执行一个callback的函数DataTablesshiny应用类似于此示例从DataTables论坛。 我想从阅读到目前为止DT 文件 (4.4节)是有可能采用同样的类sum通过columnDefs的参数options如下,但它也将使意义,如果我只知道往哪里放的JS参数做手工类像的链接。

您可以删除所有columnDefscallback参数看一个例子出发点。

app.R

library(shiny)
library(DT)

ui <- fluidPage(

  title = 'Select Table Rows',

  hr(),

  h1('A Server-side Table'),

  fluidRow(
    column(9, DT::dataTableOutput('x3'))
  )

)


server <- function(input, output, session) {

  # server-side processing
  mtcars2 = mtcars[, 1:8]
  output$x3 = DT::renderDataTable(DT::datatable(mtcars2, 
                                                extensions = 'Buttons',
                                                options = list(
                                                  scrollX = TRUE,
                                                  scrollY = TRUE,
                                                  pageLength = 10,
                                                  order = list(list(1, 'asc')),
                                                  fixedHeader = TRUE,
                                                  dom = 'Blrtip',
                                                  buttons = c('copy', 'csv', 'excel', 'pdf', 'print')
                                                #  columnDefs = JS("[
                                                #                  { className: 'sum', 'targets': [ 1,2 ] }
                                                #                  ]") 
                                                #  ),
                                                #callback =  JS(
                                                #  " function(row, data, start, end, display) {
                                                #  var api = this.api();
                                                #  
                                                #  api.columns('.sum', { page: 'current' }).every(function () {
                                                #  var sum = api
                                                #  .cells( null, this.index(), { page: 'current'} )
                                                #  .render('display')
                                                #  .reduce(function (a, b) {
                                                #  var x = parseFloat(a) || 0;
                                                #  var y = parseFloat(b) || 0;
                                                #  return x + y;
                                                #  }, 0);
                                                #  console.log(this.index() +' '+ sum); //alert(sum);
                                                #  $(this.footer()).html(sum);
                                                #  });
                                    #}"
                          )       
                )
      )
  }

shinyApp(ui = ui, server = server)

最终的解决方案:

library(shiny)
library(DT)

ui <- fluidPage(

  title = 'Select Table Rows',

  hr(),

  h1('A Server-side Table'),

  fluidRow(
    column(9, DT::dataTableOutput('x3'))
  )

)


server <- function(input, output, session) {

  # server-side processing

  mtcars2 = mtcars[, 1:8]

  sketch <- htmltools::withTags(table(
                  class = "display",
                  style = "bootstrap",
                  tableHeader(colnames(mtcars2)),
                  tableFooter(colnames(mtcars2))
          ))

  output$x3 = DT::renderDataTable(DT::datatable(mtcars2,
                                                container = sketch,
                                                extensions = 'Buttons',
                                                options = list(
                                                  scrollX = TRUE,
                                                  scrollY = TRUE,
                                                  pageLength = 10,
                                                  order = list(list(1, 'asc')),
                                                  dom = 'Blrtip',
                                                  buttons = c('copy', 'csv', 'excel', 'pdf', 'print'),
                                                  footerCallback = JS(
       "function( tfoot, data, start, end, display ) {",
       "var api = this.api(), data;",
        "total = api.column( 1, { page: 'current'} ).data().reduce( function ( a, b ) {return a + b;} )",
        "total1 = api.column( 2, { page: 'current'} ).data().reduce( function ( a, b ) {return a + b;} )",
       "total2 = api.column( 3, { page: 'current'} ).data().reduce( function ( a, b ) {return a + b;} )",
        "total3 = api.column( 4, { page: 'current'} ).data().reduce( function ( a, b ) {return a + b;} )",
       "total4 = api.column( 5, { page: 'current'} ).data().reduce( function ( a, b ) {return a + b;} )",
        "total5 = api.column( 6, { page: 'current'} ).data().reduce( function ( a, b ) {return a + b;} )",
       "total6 = api.column( 7, { page: 'current'} ).data().reduce( function ( a, b ) {return a + b;} )",
        "total7 = api.column( 8, { page: 'current'} ).data().reduce( function ( a, b ) {return a + b;} )",
        "$( api.column( 1 ).footer() ).html(total.toFixed(2));
        $( api.column( 2 ).footer() ).html(total1.toFixed(2));
        $( api.column( 3 ).footer() ).html(total2.toFixed(2));
        $( api.column( 4 ).footer() ).html(total3.toFixed(2));
        $( api.column( 5 ).footer() ).html(total4.toFixed(2));
        $( api.column( 6 ).footer() ).html(total5.toFixed(2));
        $( api.column( 7 ).footer() ).html(total6.toFixed(2));
        $( api.column( 8 ).footer() ).html(total7.toFixed(2));",
        "}"
        ))
      ))
}

shinyApp(ui = ui, server = server)

我意识到这可能是坏的形式JS,但是,在我的情况下,这个效果最好,这样我可以适用于各种不同的选项(某些货币符号,有一些平均数,不同的十进制精度等)。

Answer 1:

为了显示总和/总在页脚,你有一个容器添加到您的表格按以下步骤进行。 我也改变了JS代码:下面提供的版本必须工作。 不幸的是,我不知道什么是错误的与您的JS代码,因为我不是JavaScript的家伙。 您可以使用HTML(...)部分起到改变你的资金的表现。

server <- function(input, output, session) {

# server-side processing
  mtcars2 = mtcars[, 1:8]
      sketch = htmltools::withTags(table(tableFooter(c("",0,0,0,0,0,0,0,0))))
      output$x3 = DT::renderDataTable(DT::datatable(mtcars2, container = sketch,
                                                    extensions = 'Buttons',
                                                    options = list(
                                                      scrollX = TRUE,
                                                      scrollY = TRUE,
                                                      pageLength = 10,
                                                      order = list(list(1, 'asc')),
                                                      fixedHeader = TRUE,
                                                      dom = 'Blrtip',
                                                      buttons = c('copy', 'csv', 'excel', 'pdf', 'print')

                                                      footerCallback =  JS(
                                                    "function( tfoot, data, start, end, display ) {",
                                                    "var api = this.api();",
                                                    "$( api.column( 1 ).footer() ).html(",
                                                    "api.column( 1).data().reduce( function ( a, b ) {",
                                                    "return a + b;",
                                                    "} )",
                                                    ");",
                                                    "$( api.column( 2 ).footer() ).html(",
                                                    "api.column( 2 ).data().reduce( function ( a, b ) {",
                                                    "return a + b;",
                                                    "} )",
                                                    ");",
                                                    "$( api.column( 3 ).footer() ).html(",
                                                    "api.column( 3 ).data().reduce( function ( a, b ) {",
                                                    "return a + b;",
                                                    "} )",
                                                    ");",
                                                    "$( api.column( 4 ).footer() ).html(",
                                                    "api.column( 4 ).data().reduce( function ( a, b ) {",
                                                    "return a + b;",
                                                    "} )",
                                                    ");",
                                                    "$( api.column( 5 ).footer() ).html(",
                                                    "api.column( 5 ).data().reduce( function ( a, b ) {",
                                                    "return a + b;",
                                                    "} )",
                                                    ");",
                                                    "$( api.column( 6 ).footer() ).html(",
                                                    "api.column( 6 ).data().reduce( function ( a, b ) {",
                                                    "return a + b;",
                                                    "} )",
                                                    ");",
                                                    "$( api.column( 7 ).footer() ).html(",
                                                    "api.column( 7 ).data().reduce( function ( a, b ) {",
                                                    "return a + b;",
                                                    "} )",
                                                    ");",
                                                    "$( api.column( 8 ).footer() ).html(",
                                                    "api.column( 8 ).data().reduce( function ( a, b ) {",
                                                    "return a + b;",
                                                    "} )",
                                                    ");",
                                                    "}")
                                                )       
  )
  )
}


文章来源: shiny DataTables footer Callback sums