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

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

本文关键字：颜色 悬停 选择 数据表 背景 黑色 DT      更新时间：2023-09-26

我是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')

我使用

shiny_0.13.2 
DT_0.1.55

1） 您需要formatStyle 中的target="row"

2） 如果你在shiny中使用它，你可以简单地添加！重要的悬停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%)  }
相关文章：