请注意,我在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)
#dtable
替换为#NS-dtable
,其中NS
是你使用的命名空间。 - Stéphane Laurentpaste0("$(#'",dtid,"'")
- Mohamad Sahil