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

Question

我不熟悉使用R中的DT库和datatable()函数，并希望了解如何更改其外观...

我目前有一个数据表的黑色背景，并希望它在悬停在它上面时改变颜色，或者当选择特定行时...但选择背景似乎消除了悬停选项......任何帮助都将是非常感谢。

请参阅下面的内容，看看我在悬停时制作黑色背景表的情况有多远。

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)

注意，这项工作仅适用于闪亮的

更新不闪亮版

尝试将重要内容添加到回调中

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%)  }