假设我们有一个包含两个DT表的Shiny应用程序，我们希望在呈现表后使用一些Javascript对其进行修改。我们在每个表的标题中附加一个不同的上标；我们在表1上添加上标“ 1”，在表2上添加上标“ 2”。此JS是使用触发的initComplete，即在渲染表时。
我的JS技能不存在，因此我目前正在选择要附加到的表头th:contains(<header-string>)。例如，将上标附加到包含字符串'Sepal'的表标题中：
jsc <- '
function(settings, json) {
$("th:contains(\'Sepal\')").append(\'<sup>1</sup>\');
}
'
由于我们需要为不同的表使用不同的上标，因此我们需要定义单独的Javascript以为每个表触发。问题是表头都包含我要查找的字符串，导致两个上标都附加到两个表头上。
假设不同的表在相关的表头中始终包含相同的字符串（因此这th:contains不是一个可行的选择-表头可能完全相同），我们如何选择特定的表以将Javascript应用于？我们无法在“ Shiny”应用中elementId向datatable通话提供，例如，
output$table1<- renderDT({datatable(iris, elementId = 'table1')})
导致警告
renderWidget（instance）中的警告：忽略显式提供的窗口小部件ID“ table1”；闪亮不使用它们
下面是一个可重现的示例。这两个表具有相同的列名，因此Javascript将两个上标追加到Sepal.Length每个表的标题中。所需的输出是使第一个表的Sepal.Length标头带有上标“ 1”，第二个表的Sepal.Length标头带有上标“ 2”，而当前示例在两个表的标头后均附加“ 12”。
有趣的是，当应用程序在RStudio Viewer中打开时，仅第一个initComplete运行，因此两个表头均带有上标“ 1”。我忽略了这一点，并在Firefox和Chrome上查看了结果。
library(shiny)
library(DT)
jsc <- '
function(settings, json) {
$("th:contains(\'Sepal\')").append(\'<sup>1</sup>\');
}
'
jsc2 <- '
function(settings, json) {
$("th:contains(\'Sepal\')").append(\'<sup>2</sup>\');
}
'
ui <- {
fluidPage(
fluidRow(
column(6,
DTOutput('table1')
),
column(6,
DTOutput('table2')
)
)
)
}
server <- function(input, output, session) {
output$table1 <- renderDT({
datatable(iris[, c('Species', 'Sepal.Length')],
options(
initComplete = JS(jsc))
)
})
output$table2 <- renderDT({
datatable(iris[, c('Species', 'Sepal.Length')],
options(
initComplete = JS(jsc2)
)
)
})
}
options(shiny.launch.browser = TRUE)
shinyApp(ui, server)
请注意，我知道我们可以使用将它们直接写到<sup>1</sup>表头中escape = FALSE，但是要在表上执行其他JS函数，因此这种方法不适合。感谢您的任何建议。
首先，options必须是一个列表：
datatable(iris[, c('Species', 'Sepal.Length')],
options = list(
initComplete = JS(jsc)
)
)
现在，您可以通过在jQuery选择器中提供ID来定位表：
jsc <- '
function(settings, json) {
$("#table1 th:contains(\'Sepal\')").append(\'<sup>1</sup>\');
}
'
否则，$("th:contains(\'Sepal\')")选择所有th包含Sepal可以在整个页面上找到。
但是，如果您更改ID，则这种方法需要更改JS代码。这样做更实用：
jsc <- '
function(settings, json) {
var $table = $(this.api().table().node());
$table.find("th:contains(\'Sepal\')").append(\'<sup>1</sup>\');
}
'
完整代码：
library(shiny)
library(DT)
jsc <- '
function(settings, json) {
var $table = $(this.api().table().node());
$table.find("th:contains(\'Sepal\')").append(\'<sup>1</sup>\');
}
'
jsc2 <- '
function(settings, json) {
var $table = $(this.api().table().node());
$table.find("th:contains(\'Sepal\')").append(\'<sup>2</sup>\');
}
'
ui <- {
fluidPage(
fluidRow(
column(6,
DTOutput('table1')
),
column(6,
DTOutput('table2')
)
)
)
}
server <- function(input, output, session) {
output$table1 <- renderDT({
datatable(iris[, c('Species', 'Sepal.Length')],
options = list(
initComplete = JS(jsc)
)
)
})
output$table2 <- renderDT({
datatable(iris[, c('Species', 'Sepal.Length')],
options = list(
initComplete = JS(jsc2)
)
)
})
}
shinyApp(ui, server)
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句