R Shiny表格，顶部和底部均带有水平滚动条

Question

请注意，我在R Shiny应用程序中的一个页面上有一个非常大的表格，因此我需要在表格的顶部和底部都有水平滚动条。

请注意，我对HTML、CSS和JS非常不熟悉。

同时，我已经成功地将水平滚动条移动到了表格顶部，使用以下解决方案：

R DT水平滚动条位于表格顶部

我只需要帮助将滚动条添加到底部即可，实际上我正在使用那里解释的示例，它完美地工作。

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)

- Angelo

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代码（js）中将dtable（两个出现）替换为您的数据表的输出ID。请保留HTML标签。

- Stéphane Laurent

---

@StéphaneLaurent，请问 www 子文件夹位于哪里？我正在构建一个 Shiny 应用程序的包，但找不到这个文件夹。 - lmsimp

@lmsimp 你需要创建它。在包含你的应用程序 R 代码的文件夹中创建。 - Stéphane Laurent

@StéphaneLaurent 我该如何在一个模块中实现这个？ - Mohamad Sahil

@MohamadSahil 在JS代码中，你必须将 #dtable 替换为 #NS-dtable，其中 NS 是你使用的命名空间。 - Stéphane Laurent

@StéphaneLaurent 谢谢。我想在这种情况下，我需要将js代码转换为一个带有表格id作为参数的函数。然后在UI内部将其称为ns('dtable')。 如何在函数内引用表格id？paste0("$(#'",dtid,"'") - Mohamad Sahil