DT Shiny 按列不同的自定义列标题

Question

我的 css 技能非常有限，但假设以下示例：

  sketch = htmltools::withTags(table(
     class = 'display',
     thead(
        tr(
           th(rowspan = 2, 'Species'),
           th(colspan = 2, 'Sepal'),
           th(colspan = 2, 'Petal')
        ),
        tr(
           lapply(rep(c('Length', 'Width'), 2), th)
        )
     )
  ))
  datatable(head(iris, 10), 
     container = sketch, options = list(
     initComplete = JS(
        "function(settings, json) {",
        "$(this.api().table().header()).css({'background-color': '#000', 'color': '#fff'});",
        "}")
  ))

我怎么会改变颜色编码的前两个列标题为蓝色的说，这样的列标题，两排Sepal,Length和Sepal,Width是蓝色的，但保留作为另一种颜色以下结构Petal,Length和Petal,Width

在 Stephane 的初步回答之后，我添加了一个示例。

Answer 1

您可以使用该选项headerCallback。

datatable(head(iris, 10), 
          container = sketch, options = list(
            headerCallback = JS(
              "function( thead, data, start, end, display ) {
      $(thead).closest('thead').find('th').eq(3).css('color', 'red');
      $(thead).closest('thead').find('th').eq(4).css('color', 'red');
      $(thead).closest('thead').find('th').eq(5).css('color', 'blue');
      $(thead).closest('thead').find('th').eq(6).css('color', 'blue');
              }"
            ),
            initComplete = JS(
              "function(settings, json) {",
              "$(this.api().table().header()).css({'background-color': '#000', 'color': '#fff'});",
              "}")
          ))

在.closest('thead')当所述报头具有多个行是必要的。

是你想要的吗？我不确定我是否正确理解了您的要求。

要更改背景颜色：

library(DT)

sketch = htmltools::withTags(table(
  class = 'display',
  thead(
    tr(
      th(rowspan = 2, 'Species'),
      th(colspan = 2, 'Sepal'),
      th(colspan = 2, 'Petal')
    ),
    tr(
      lapply(rep(c('Length', 'Width'), 2), th)
    )
  )
))

headerCallback <- "function( thead, data, start, end, display ) {
  $(thead).closest('thead').find('th').eq(0).css('background-color', 'green');
  $(thead).closest('thead').find('th').eq(1).css('background-color', 'red');
  $(thead).closest('thead').find('th').eq(2).css('background-color', 'blue');
  $(thead).closest('thead').find('th').eq(3).css('background-color', 'red');
  $(thead).closest('thead').find('th').eq(4).css('background-color', 'red');
  $(thead).closest('thead').find('th').eq(5).css('background-color', 'blue');
  $(thead).closest('thead').find('th').eq(6).css('background-color', 'blue');
}"

datatable(head(iris, 10), 
          container = sketch, options = list(
            headerCallback = JS(headerCallback)
          )
)