R数据表与分组交替行颜色答案

【问题标题】：R Data Table Alternating Row Color with GroupingsR数据表与分组交替行颜色
【发布时间】：2021-12-17 02:31:41
【问题描述】：

我有一个闪亮的仪表板，其中有一个数据表，我想自定义交替的行颜色。我能够找到 CSS 来指定奇数和偶数行颜色，但是因为我使用的是 RowGroup 扩展，所以它没有按预期工作。它将组标题计为一行。

“男性”组中的第一行应该是白色，而不是蓝色。希望这是一个快速的 CSS 修复。提前致谢！

下面是一个简短的可重现示例：

### Short reproducable example for alternating rows in datatable
library(shiny)
library(shinydashboard)
library(shinycssloaders)
library(dplyr)
library(DT)

data <- data.frame(
  Sex = c("Female", "Female", "Male", "Male", "Male"),
  First.Name = c("Mary", "Amy", "Connor", "Blaine", "Emily"),
  Last.Name = c("Frazier", "Jones", "Jones", "Black", "Rains")
)


ui <- dashboardPage(
  
  dashboardHeader(title = "Dashboard", 
                  titleWidth =300
  ),
  
  dashboardSidebar(width = 300,
                   
                   sidebarMenu(id = "sidebar",
                               menuItem("User Guide", tabName = "userguide", icon = icon("question-circle")),
                               menuItem("Dashboard", tabName = "dashboard", icon = icon("table"), selected = TRUE)
                   )
                   
  ),
  dashboardBody(
    
    tabItems(
      tabItem(tabName = "userguide",
              fluidRow(
                box(width = 12
                )
              )
      ),
      
      tabItem(tabName = "dashboard",
              fluidRow(
                box(width = 12, 
                    DTOutput("table") %>%
                      withSpinner(color = "#00416B")
                )
                
              )
      )
    )
    
  )
  
  
)

server <- function(input, output) {
  
  output$table <- renderDT(
    data,
    rownames = FALSE, 
    caption = htmltools::tags$caption(
      style = 'text-align: center; font-weight: bold; color:black',
      paste0("This list was generated on ", Sys.Date(), ".")
    ),
    extensions = c('Buttons', 'RowGroup', 'FixedHeader'),
    options = list(paging = FALSE, 
                   dom = 'Blft',
                   fixedHeader = TRUE,
                   buttons = list(
                     list(extend = 'pdf', 
                          filename = paste0("List ", Sys.Date()), 
                          orientation = 'landscape')
                   ),
                   rowGroup = list(dataSrc = 0),
                   initComplete = JS(
                     "function(settings, json) {",
                     "$(this.api().table().header()).css({'background-color': '#00416B', 'color': 'white'});",
                     "$('table.dataTable.display tbody tr:odd').css('background-color', 'white');",
                     "$('table.dataTable.display tbody tr:even').css('background-color', '#e4f0f5');",
                     "}")
                   
                   
    ),
    escape = FALSE)
  
}

shinyApp(ui = ui, server = server)

【问题讨论】：

标签： css r datatable dt

【解决方案1】：

它已经分配了奇数和偶数类，您只需使用 tr:odd 和 tr:even 再次“重做”整个表，这会导致问题。

修复很简单，把你JS代码中的tr:odd和tr:even替换成tr.odd和tr.even

【讨论】：