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

【问题标题】：DT Shiny different custom column header by columnDT Shiny 不同的自定义列标题按列
【发布时间】：2019-02-08 14:28:19
【问题描述】：

我的 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 和 @ 保留为另一种颜色987654327@

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

【问题讨论】：

标签： css r shiny dt htmltools

【解决方案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)
          )
)

【讨论】：

斯蒂芬谢谢你！我相信您的初始答案将来不会浪费 - 请参见添加的示例 - 计划是让用户更容易区分列结构，而不是通过字体颜色而是通过背景颜色。希望这是有道理的。
@J.Doe。不客气。我刚刚编辑了答案以显示如何更改背景颜色。