DT 数据表背景颜色为黑色，但仍然有悬停和选择颜色

Question

我刚开始使用 R 中的 DT 库和 datatable() 函数，希望获得有关如何更改其外观的帮助...

我目前有一个数据的黑色背景table，我希望它在悬停在它上面时或在选择特定行时改变颜色...但选择背景似乎消除了悬停选项...任何帮助将不胜感激。

请参阅下面的内容，了解我尝试使用悬停制作黑色背景 table 的进展情况。

DT:::datatable(
  head(iris, 20),rownames = FALSE,options = list(dom='t',
    initComplete = JS(
      "function(settings, json) {",
      "$(this.api().table().header()).css({'background-color': '#000', 'color': '#fff'});",
      "}")
  ),
  container = tags$table(
    class="stripe row-border hover",
    tags$thead(tags$tr(lapply(colnames(iris), tags$th)))
  )
) %>% formatStyle(columns=colnames(iris),color='white',background = 'black')

Answer 1

我用

shiny_0.13.2 
DT_0.1.55

1)您需要 target="row" 在 formatStyle

2) 如果你在 shiny 中使用它，你可以简单地添加 !important 来悬停 css :

library(DT)
library(shiny)

ui=shinyUI(
  fluidPage(
    tags$head(tags$style(HTML("table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
                              background-color: #9c4242 !important;
                              } "))),
    DT::dataTableOutput("tt")
    )
  )

server=shinyServer(function(input, output) {
  output$tt=DT::renderDataTable(
    DT:::datatable(
      head(iris, 20),rownames = FALSE,options = list(dom='t',
                                                     initComplete = JS(
                                                       "function(settings, json) {",
                                                       "$(this.api().table().header()).css({'background-color': '#000', 'color': '#fff'});",
                                                       "}")
      ),
      container = tags$table(
        class="stripe row-border hover",
        tags$thead(tags$tr(lapply(colnames(iris), tags$th)))
      )
    ) %>% formatStyle(columns=colnames(iris),color='white',background = 'black',target = 'row')
  )
})


shinyApp(ui=ui,server=server)

注意，此功能仅适用于 shiny

更新不闪亮的版本

尝试将重要信息添加到回调中

library(DT)
library(shiny) # needed for tags
    DT:::datatable(
      head(iris, 20),rownames = FALSE,options = list(dom='t',
                                                     initComplete = JS(
                                                       "function(settings, json) {",
                                                       "$(this.api().table().header()).css({'background-color': '#000', 'color': '#fff'});",
                                                       "var css = document.createElement('style');
                                                        css.type = 'text/css';
                                                        css.innerHTML = '.table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover { background-color: #9c4242 !important }';
                                                        document.body.appendChild(css);",
                                                       "}")
      ),
      container = tags$table(
        class="stripe row-border hover",
        tags$thead(tags$tr(lapply(colnames(iris), tags$th)))
      )
    ) %>% formatStyle(columns=colnames(iris),color='white',background = 'black',target = 'row')

更新 2 反转颜色

漂亮的外观你可以使用

css

table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover { -webkit-filter: invert(100%);filter: invert(100%)  }

DT 数据表背景颜色为黑色，但仍然有悬停和选择颜色

DT datatable background colour black, but still have hover and selection colours

javascript

r

shiny

dt

更新不闪亮的版本

更新 2 反转颜色