DT逐列显示不同的自定义列标题

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的两行均为蓝色，但将以下结构保留为另一种颜色{ {1}}和Petal,Length

在斯蒂芬（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)
          )
)