【问题标题】:Customize pagination box size and font自定义分页框大小和字体
【发布时间】:2020-10-15 07:43:35
【问题描述】:

我正在努力实现以下目标。我有这段代码来显示一个dataTableOutput:

fluidRow(column(4,
                                       dataTableOutput(outputId="table01", width = '80px')))

这是定义视觉设置的代码:

output$table01 <- DT::renderDataTable({  
  list_var <- get_mp_data()
  df <- list_var[[3]]
  if(is.null(df)){
        df <- data.frame()
  }else{
        upcolor = "lightblue"
        downcolor = "lightblue"
        col_name = "CHG"
        df <- datatable(df
                        , rownames = FALSE 
                        , caption = paste0("Pre/Post Duration")
                        , filter = 'none'
                        , options = list(scrollX = F,
                                        autoWidth = T
                                        ,pageLength = 10 # this determines how many rows we want to see per page
                                        , info = FALSE #  this will hide the "Showing 1 of 2..." at the bottom of the table -->  https://stackoverflow.com/questions/51730816/remove-showing-1-to-n-of-n-entries-shiny-dt
                                        ,searching = FALSE  # this removes the search box  ->  https://stackoverflow.com/questions/35624413/remove-search-option-but-leave-search-columns-option
                                        ,columnDefs = list(list(width = '4', targets = c(3) ) 
                                                           ,list(width = '4', targets = c(2) )
                                                           )   # careful, column counting STARTS FROM 0 !!!!
                                        )) %>% 
              formatStyle(col_name,
                          #background = styleColorBar(range(df[, c(col_name)]), 'lightblue'),
                          background = color_from_middle(df[, c(col_name)] , downcolor,   upcolor),
                          backgroundSize = '98% 88%',
                          backgroundRepeat = 'no-repeat',
                          backgroundPosition = 'center')
  }
  return(df)
})

这张表格几乎是完美的,但从我的屏幕截图中可以看出,表格下方的分页框无缘无故地占用了大量空间。 有没有办法让“1”框更小?有没有办法隐藏“上一个”“下一个”字? 非常感谢

【问题讨论】:

  • 应该使用css来完成。像这样的东西:tags$style(HTML(" .previous, .next { display: none; } a.paginate_button { min-width: 0.5em; padding: 0.1em .5em; } "))。然而,将它直接添加到 shinyapp 并没有任何效果,尽管在开发者工具中它确实如此。
  • 另一种选择是添加到选项列表paging = F,但这会同时消失页码和下一个和上一个单词。分页占用很大空间的原因是dataTableOutput中你使用width = 80px,如果你增加它的话和数字保持一致。

标签: html r shiny dt


【解决方案1】:

您可以使用此 CSS 来减小按钮的大小:

CSS <- "
.dataTables_wrapper .dataTables_paginate .paginate_button {
  min-width: 0.5em !important; 
  padding: 0.1em .5em !important;
} 
"

ui <- fluidPage(
  tags$head(tags$style(HTML(CSS))),
  ...

要删除“previous”、“next”、“first”、“last”,您可以这样做:

datatable(mydataframe, options = 
            list(
              language = list(
                paginate = list(first="", last="", previous="", `next`="")
              )
            )
)

【讨论】:

  • 效果很好,谢谢!顺便问一下,您是否也知道如何隐藏“上一个”和“下一个”这两个词,而只住在表格下方的编号框内?
  • 其实请忽略我最后一个问题。我发现我可以在 options = list() 中添加“pagingType = “numbers”,这样就可以了。非常感谢您的支持 Stephane
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-10-12
  • 2013-01-06
  • 1970-01-01
  • 2020-02-29
  • 2017-09-01
  • 2014-12-15
相关资源
最近更新 更多