DT 中的因素搜索清除按钮：shinydashboard 与 shinymaterial

Question

我有几个应用程序正在尝试从 shinydashboard 移植到 shinymaterial，因为我的用户似乎喜欢它的美观。我在 shinymaterial 仪表板中遇到 searching/filtering 因素的问题，在使用 shinymaterial 时，通常清除因素过滤的“x”按钮不存在。

shinydashboard 屏幕截图，其中存在因子列的“过滤器清除”按钮： shinydashboard screenshot

shinymaterial 屏幕截图，其中因子列没有“过滤器清除”按钮： shinymaterial screenshot

以下是我的可重现代码示例：

闪亮仪表板

library(shiny)
library(tidyverse)
library(DT)

# Shiny Dashboard or Shiny Material
library(shinydashboard)

ui <- shinydashboard::dashboardPage(
  shinydashboard::dashboardHeader(
    title = "Some Title",
    titleWidth = 250
  ),
  
  shinydashboard::dashboardSidebar(),
  
  shinydashboard::dashboardBody(
    DT::dataTableOutput("exampleDT")
  )
)

server <- function(input, output, session) {
  
  # Use MPG Data and convert manufacturer to Factor
  df <- mpg %>%
    mutate(manufacturer = as.factor(manufacturer))
  
  # Create Datatable
  output$exampleDT <- DT::renderDataTable({
    
    DT::datatable(df,
                  class = 'cell-border stripe',
                  rownames = FALSE,
                  escape = FALSE,
                  extensions = c("KeyTable"),
                  filter = list(position = "top"),
                  options = list(searching = TRUE,
                                 searchHighlight = TRUE,
                                 scrollX = TRUE,
                                 pageLength = 5,
                                 autoWidth = TRUE,
                                 keys = TRUE,
                                 columnDefs = list(list(className = "dt-center", targets = "_all"))
                  )
    )
  })
  
}

shinyApp(ui = ui, server = server)

闪亮材质

library(shiny)
library(tidyverse)
library(DT)

# Shiny Dashboard or Shiny Material
library(shinymaterial)

ui <- shinymaterial::material_page(
  title = "Some Title",
  primary_theme_color = "grey",
  
  shinymaterial::material_tabs(
    tabs = c("Tab 1" = "tab1")
  ),
  
  shinymaterial::material_tab_content(
    tab_id = "tab1",
    shinymaterial::material_card(
      title = "",
      DT::dataTableOutput("exampleDT")
    )
  )
  
)

server <- function(input, output, session) {
  
  # Use MPG Data and convert manufacturer to Factor
  df <- mpg %>%
    mutate(manufacturer = as.factor(manufacturer))
  
  # Create Datatable
  output$exampleDT <- DT::renderDataTable({
    
    DT::datatable(df,
                  class = 'cell-border stripe',
                  rownames = FALSE,
                  escape = FALSE,
                  extensions = c("KeyTable"),
                  filter = list(position = "top"),
                  options = list(searching = TRUE,
                                 searchHighlight = TRUE,
                                 scrollX = TRUE,
                                 pageLength = 5,
                                 autoWidth = TRUE,
                                 keys = TRUE,
                                 columnDefs = list(list(className = "dt-center", targets = "_all"))
                  )
    )
  })
  
}

shinyApp(ui = ui, server = server)

Answer 1

那是因为这个“按钮”实际上是一个 glyphicon 图标。 glyphicon 图标包含在 bootstrap 中，当您使用普通的 Shiny 页面时会自动加载，但当您使用 'shinymaterial'。所以你要加一个link到bootstrap-glyphicons.css:

ui <- shinymaterial::material_page(
  tags$head(
    tags$link(href = "https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css", rel="stylesheet")
  ),
  
  title = "Some Title",
  ......

此方式需要在线使用应用程序。但是，您可以下载 css 文件并将其放入应用程序的 www 子文件夹，而不是包含 link，然后将其包含在 tags$link(href = "bootstrap-glyphicons.css", rel = "stylesheet").

DT 中的因素搜索清除按钮：shinydashboard 与 shinymaterial

Factor Search Clearing Button in DT: shinydashboard vs. shinymaterial

r

shiny

shinydashboard

dt