[英]DT Shiny different custom column header by column
my css skills are extremely limited but assuming the following example: 我的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'});",
"}")
))
How would I change the color coding of the first two column headers into say blue so that both rows of the column header Sepal,Length
and Sepal,Width
are blue, but retaining as another color the following structure Petal,Length
and Petal,Width
我如何将前两个列标题的颜色编码更改为蓝色,以使列标题
Sepal,Length
和Sepal,Width
两行均为蓝色,但将以下结构Petal,Length
和Petal,Width
保留为另一种颜色
After Stephane's initial answer, I added an example. 在Stephane最初回答之后,我添加了一个示例。
You can use the option headerCallback
. 您可以使用
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'});",
"}")
))
The .closest('thead')
is needed when the header has multiple rows. 标头包含多行时,需要
.closest('thead')
。
Is it what you want? 是你想要的吗? I'm not sure I have correctly understood your request.
我不确定我是否正确理解了您的要求。
To change the background color: 更改背景颜色:
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)
)
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.