R Shiny DataTable选择了行颜色

时间:2017-07-07 09:56:20

标签: javascript css r datatables shiny

我正在尝试在我的闪亮应用中为DataTable中的选定行设置突出显示颜色。基本上我希望所选行的颜色是红色而不是蓝色。但是,我对JavaScript并不熟悉所以我正在努力编写适当的回调(至少我认为这是问题所在)。这是我到目前为止所尝试的:

# ui.R
library(shiny)

fluidPage(
  title = 'DataTables Test',
  DT::dataTableOutput('table')
)

# server.R
library(shiny)
library(DT)

# render the table
output$table = renderDataTable(datatable(head(iris, 20), 
options = list(
    initComplete = JS(
      "function(settings, json) {",
      "var rows = $(this.api().table().rows());",
      "for (var i = 0; i < rows.length; i++){ ",
      "var row = rows[i];",
      "row.css({'background-color': '#000', 'color': '#f00'})",
      "}",
      "}")
  )))

})

如您所见,到目前为止,我只想弄清楚如何更改行颜色。一旦我弄清楚这一点,我就会尝试将css更改为:

"tr.selected td, table.dataTable td.selected { background-color: #f00}"

但我还没有到达那里 - 遗憾的是上面的代码对背景颜色没有任何作用。如果有人能帮助我解决那个很棒的整个解决方案。

1 个答案:

答案 0 :(得分:7)

这应该做的工作:

#rm(list = ls())
library(shiny)
library(DT)

ui <- basicPage(
  tags$style(HTML('table.dataTable tr.selected td, table.dataTable td.selected {background-color: pink !important;}')),
  mainPanel(DT::dataTableOutput('mytable'))
)

server <- function(input, output,session) {

  output$mytable = DT::renderDataTable(    
    datatable(mtcars)
  ) 
}
runApp(list(ui = ui, server = server))

enter image description here