如何在闪亮的DT数据表中切换单元格类？

Question

我想使用Shiny和DT触发数据表中特定单元格的事件。 假设我希望第一列在悬停时变为红色。 创建表时，我添加了一个回调，该回调在第一列的td元素上注册了一个悬停事件。

library(shiny)
library(DT)

ui <- fluidPage(
  tags$head(tags$style(HTML(".red { background-color: red; }"))),
  DT::dataTableOutput("iris")
)

server <- function(input, output) {
  output$iris <- DT::renderDataTable(DT::datatable(iris, callback = JS("
table.column(0).nodes().to$().hover(function(){$(this).toggleClass('red');});
")))
}

shinyApp(ui = ui, server = server)

从javascript控制台，如果我运行相同的代码，则可以运行：

table=$('#DataTables_Table_0').DataTable()
table.column(0).nodes().to$().hover(function(){$(this).toggleClass('red');});

为什么这在datatable回调中不起作用？ 什么是正确的方法？

Answer 1

通常，当您看到这种行为时，它暗示了时间问题。 在完全渲染表之前将回调该回调，您要对其进行操作的列还不存在。

删除callback选项，并使用options = list( drawCallback = JS(...) )代替。

DT::datatable(
  iris,
  options = list(
    drawCallback = JS('function() {this.api().table().column(0).nodes().to$().hover(function(){$(this).toggleClass("red")}) }')
  )
)

Answer 2

为了完整drawCallback ，这里提供了三种解决方案： drawCallback ， rowCallback和table.on 。 上面给出了drawCallback作为答案。 columnDefs可用于将类分配给列，这使选择器的使用变得容易。 rowCallback是drawCallback的替代方法。 最后，可以使用datatables API中的on（）为鼠标事件分配事件，但是您必须同时管理mouseenter和mouseleave而不是jQuery的hover()便捷方法。 （我发现这最后一个解决方案很困惑，因为文档（1）没有第二个选择器参数， 而 （2）鼠标事件未在events API中列出，但这是可行的！）

重要的是，只需要其中之一，而不是全部三个！ 就个人而言，我最喜欢rowCallback 。

library(shiny)
library(DT)

ui <- fluidPage(
  tags$head(tags$style(HTML(".red { background-color: red; }"))),
  div(id='tbl1', DT::dataTableOutput("iris"))
)

server <- function(input, output) {
  output$iris <- DT::renderDataTable(DT::datatable(iris, 
                                                   options = list(drawCallback=JS("function() { this.api().table().column(0).nodes().to$().hover(function(){$(this).toggleClass('red');}); }"),
                                                                  rowCallback=JS("function(row) { $(row).children('.firstcol').hover(function(){$(this).toggleClass('red')}) }"),
                                                                  columnDefs=list(list(className='firstcol', targets=0))),
                                                    callback = JS("
 table.on('mouseenter', 'td.firstcol', function() { $(this).addClass('red'); });
 table.on('mouseleave', 'td.firstcol', function() { $(this).removeClass('red'); });
")))
}

shinyApp(ui = ui, server = server)