css - 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

在斯蒂芬最初的回答之后，我添加了一个例子。

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