R 顶部和底部都带有水平滚动条的闪亮表格

Question

请我有一个闪亮的 R 应用程序，其中一个页面有一个非常大的表格。出于这个原因，我需要在表格的顶部和底部都有水平滚动条。请记住，我对 HTML、CSS 和 JS 不太熟悉。此外，我已经设法使用解决方案将水平滚动条移动到表格顶部： R DT Horizo​​ntal scroll bar at top of the table

我实际上是在使用那里解释的示例，并且效果很好。我只需要一些帮助来在底部添加滚动条。

css <- HTML(
    "#flipped > .dataTables_wrapper.no-footer > .dataTables_scroll > .dataTables_scrollBody {
        transform:rotateX(180deg);
    }
    #flipped > .dataTables_wrapper.no-footer > .dataTables_scroll > .dataTables_scrollBody table{
        transform:rotateX(180deg);
    }"
)

ui <- fluidPage(
    tags$head(tags$style(css)),
    fluidRow(column(width = 6,
                    h4("Flipped Scrollbar"),
                    br(),
                    DT::dataTableOutput("flipped")
                    ),
             column(width = 6,
                    h4("Regular Scrollbar"),
                    br(),
                    DT::dataTableOutput("regular")
                    )
             )
)

server <- function(input, output, session) {
    output$flipped <- DT::renderDataTable({
        DT::datatable(mtcars, rownames = FALSE,
                      options = list(
                          scrollX = TRUE
                      )
        )
    })
    output$regular <- DT::renderDataTable({
        DT::datatable(mtcars, rownames = FALSE,
                      options = list(
                          scrollX = TRUE
                      )
        )
    })
}

shinyApp(ui, server)

我设法找到了一个类似的问题（表格顶部和底部的水平滚动条），但是，我无法理解如何将该 css 和 JS 代码应用于 Shiny 应用程序。非常感谢

更新（仍然不起作用）作为 Stéphane Laurent 建议解决方案的后续行动。我现在的代码是：

library(shiny)
library(DT)

wideTable <- as.data.frame(matrix(rnorm(1000), nrow = 10, ncol = 100))

js <- "
$(document).ready(function(){
  $('#dtable').on('shiny:value', function(e){
    setTimeout(function(){
      $('#dtable table').wrap('<div id=\"scrolldiv\"></div>');
      $('#scrolldiv').doubleScroll({
        contentElement: $('table'),
          scrollCss: {                
              'overflow-x': 'scroll',
              'overflow-y': 'hidden'
          },
          contentCss: {
              'overflow-x': 'scroll',
              'overflow-y': 'hidden'
          },
        resetOnWindowResize: true
      });
      setTimeout(function(){$(window).resize();}, 100);
    }, 0);
  });
});
"

CSS <- "
.doubleScroll-scroll-wrapper {
  clear: both;
}
"

ui <- fluidPage(
  tags$head(
    tags$script(src = "jquery.doubleScroll.js"),
    tags$script(HTML(js)),
    tags$style(HTML(CSS))
  ),
  br(),
  dataTableOutput("dtable")
)

server <- function(input, output, session){
  
  output$dtable <- DT::renderDataTable({
    datatable(wideTable, 
              rownames = T,
              filter = 'top',
              caption = paste0("All columns of CSV report")
)
      })
      
    }
    
    shinyApp(ui, server)

Answer 1

这是使用DoubleScroll JavaScript 库的解决方案。

从这里下载文件jquery.doubleScroll.js。把它放在你闪亮的应用程序的www子文件夹中。

然后这是应用程序：

library(shiny)
library(DT)

wideTable <- as.data.frame(matrix(rnorm(1000), nrow = 10, ncol = 100))

js <- "
$(document).ready(function(){
  $('#dtable').on('shiny:value', function(e){
    setTimeout(function(){
      $('#dtable table').wrap('<div id=\"scrolldiv\"></div>');
      $('#scrolldiv').doubleScroll({
        contentElement: $('table'),
          scrollCss: {                
              'overflow-x': 'scroll',
              'overflow-y': 'hidden'
          },
          contentCss: {
              'overflow-x': 'scroll',
              'overflow-y': 'hidden'
          },
        resetOnWindowResize: true
      });
      setTimeout(function(){$(window).resize();}, 100);
    }, 0);
  });
});
"

CSS <- "
.doubleScroll-scroll-wrapper {
  clear: both;
}
"

ui <- fluidPage(
  tags$head(
    tags$script(src = "jquery.doubleScroll.js"),
    tags$script(HTML(js)),
    tags$style(HTML(CSS))
  ),
  br(),
  DTOutput("dtable")
)

server <- function(input, output, session){
  
  output[["dtable"]] <- renderDT({
    datatable(wideTable)
  })
  
}

shinyApp(ui, server)

如果您的数据表的输出 id 不是"dtable"，则在 JS 代码 ( ) 中用您的数据表的输出 idjs替换dtable（出现两次）。