DT::datatable 在闪亮的应用程序中将 formatStyle() 与 JS 代码组合时未加载
DT::datatable is not loaded when combining formatStyle() with JS code in a shiny app
我有一个闪亮的应用程序,当用户将鼠标悬停在 Species
列上时,我希望在其中更改光标,并且我还想使用以下格式设置此列的格式:
%>%
formatStyle('View', color = 'red', backgroundColor = 'orange', fontWeight = 'bold')
但是当我添加这个特定的代码行时,我的 table 没有加载并且卡在 'Processing' 模式。当我删除鼠标悬停功能的 JS
部分时,不会发生这种情况。我该如何组合它们?
rowCallback = JS(
"function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {",
"var full_text = aData[1] + ','+ aData[2] + ',' + aData[3] + ','+ aData[4];",
"$('td:eq(5)', nRow).attr('title', full_text);", # Tool Tip
"$('td:eq(5)', nRow).css('cursor', 'pointer');", # Cursor icon changes to hand (pointer) on Hover
"}")
应用程序
library(shiny)
library(DT)
shinyApp(
ui = fluidPage(
DT::dataTableOutput("irisTable")
),
server = function(input, output) {
output$irisTable <- DT::renderDataTable({
DT::datatable(datasets::iris,
options = list(rowCallback = JS(
"function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {",
"var full_text = aData[1] + ','+ aData[2] + ',' + aData[3] + ','+ aData[4];",
"$('td:eq(5)', nRow).attr('title', full_text);", # Tool Tip
"$('td:eq(5)', nRow).css('cursor', 'pointer');", # Cursor icon changes to hand (pointer) on Hover
"}"),pageLength = 5,columnDefs = list(list(className = 'dt-left', targets = "_all"))),rownames= T,
selection = list(mode = 'single', target = 'cell')
)%>%
formatStyle('Species', color = 'red', backgroundColor = 'orange', fontWeight = 'bold')
})
}
)
那是因为 formatStyle
也使用了 rowCallback
选项,但参数被命名为 row
和 data
,而不是 nRow
和 nData
.您必须使用这些名称,这有效:
library(shiny)
library(DT)
shinyApp(
ui = fluidPage(
DTOutput("irisTable")
),
server = function(input, output) {
output$irisTable <- renderDT({
datatable(
datasets::iris,
options = list(
rowCallback = JS(
"function(row, data) {",
"var full_text = data[1] + ',' + data[2] + ',' + data[3] + ',' + data[4];",
"$('td:eq(5)', row).attr('title', full_text);", # Tool Tip
"$('td:eq(5)', row).css('cursor', 'pointer');", # Cursor icon changes to hand (pointer) on Hover
"}"),
pageLength = 5,
columnDefs = list(
list(className = 'dt-left', targets = "_all")
)
),
rownames= TRUE,
selection = list(mode = 'single', target = 'cell')
)%>%
formatStyle('Species', color = 'red', backgroundColor = 'orange', fontWeight = 'bold')
})
}
)
我有一个闪亮的应用程序,当用户将鼠标悬停在 Species
列上时,我希望在其中更改光标,并且我还想使用以下格式设置此列的格式:
%>%
formatStyle('View', color = 'red', backgroundColor = 'orange', fontWeight = 'bold')
但是当我添加这个特定的代码行时,我的 table 没有加载并且卡在 'Processing' 模式。当我删除鼠标悬停功能的 JS
部分时,不会发生这种情况。我该如何组合它们?
rowCallback = JS(
"function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {",
"var full_text = aData[1] + ','+ aData[2] + ',' + aData[3] + ','+ aData[4];",
"$('td:eq(5)', nRow).attr('title', full_text);", # Tool Tip
"$('td:eq(5)', nRow).css('cursor', 'pointer');", # Cursor icon changes to hand (pointer) on Hover
"}")
应用程序
library(shiny)
library(DT)
shinyApp(
ui = fluidPage(
DT::dataTableOutput("irisTable")
),
server = function(input, output) {
output$irisTable <- DT::renderDataTable({
DT::datatable(datasets::iris,
options = list(rowCallback = JS(
"function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {",
"var full_text = aData[1] + ','+ aData[2] + ',' + aData[3] + ','+ aData[4];",
"$('td:eq(5)', nRow).attr('title', full_text);", # Tool Tip
"$('td:eq(5)', nRow).css('cursor', 'pointer');", # Cursor icon changes to hand (pointer) on Hover
"}"),pageLength = 5,columnDefs = list(list(className = 'dt-left', targets = "_all"))),rownames= T,
selection = list(mode = 'single', target = 'cell')
)%>%
formatStyle('Species', color = 'red', backgroundColor = 'orange', fontWeight = 'bold')
})
}
)
那是因为 formatStyle
也使用了 rowCallback
选项,但参数被命名为 row
和 data
,而不是 nRow
和 nData
.您必须使用这些名称,这有效:
library(shiny)
library(DT)
shinyApp(
ui = fluidPage(
DTOutput("irisTable")
),
server = function(input, output) {
output$irisTable <- renderDT({
datatable(
datasets::iris,
options = list(
rowCallback = JS(
"function(row, data) {",
"var full_text = data[1] + ',' + data[2] + ',' + data[3] + ',' + data[4];",
"$('td:eq(5)', row).attr('title', full_text);", # Tool Tip
"$('td:eq(5)', row).css('cursor', 'pointer');", # Cursor icon changes to hand (pointer) on Hover
"}"),
pageLength = 5,
columnDefs = list(
list(className = 'dt-left', targets = "_all")
)
),
rownames= TRUE,
selection = list(mode = 'single', target = 'cell')
)%>%
formatStyle('Species', color = 'red', backgroundColor = 'orange', fontWeight = 'bold')
})
}
)