当R中的每一行DT上的hover时如何显示不同的图像

Question

我试图在 DT::datatable 的每一行上显示 hover 时的图像。 我发现一个SO 帖子几乎可以满足我的要求，但它对每一行都重复相同的图像。 我想要的是从 data.frame 列中读取 url，并希望重新定义大小。 对于 JS 程序员来说，这可能是一个非常基础的问题，但我对 JS 的了解几乎没有。

这是一个小例子：

library(DT)

df <- data.frame(stringsAsFactors=FALSE,
                 a = rep("my stackoverflow Avatar",2),
                 b = rep("my stackoverflow Avatar",2),
                 url=c('https://d33wubrfki0l68.cloudfront.net/57299a1dcd979c623325f11bf5e5ce60f3d4eb00/e4602/wp-content/uploads/2018/10/black.png'
                       ,'https://d33wubrfki0l68.cloudfront.net/ca4b0ae74fce141fb92ede7117b1c1928478c441/98350/wp-content/uploads/2018/10/rstudio-logo-gray.png')
                 )

datatable(df, options=list(columnDefs=list(list(
  targets=1:1,render=DT::JS(
    'function(data,row,type,meta) {
      return "<a class=\'ItemsTooltip\' href=\'www.example.com\' target=\'_blank\'><img class=\'imgTooltip\' src=\'https://d33wubrfki0l68.cloudfront.net/57299a1dcd979c623325f11bf5e5ce60f3d4eb00/e4602/wp-content/uploads/2018/10/black.png\'/>" +
      data + "</a>";
    }'
    )
  ))))

我想从 df 的 url 列中读取图像 url。

任何帮助都感激不尽。

Answer 1

您可以创建一个image标签并将其与escape = FALSE一起使用。

library(DT)
datatable(transform(df, url = sprintf('<img src = %s></img>', url)), escape = FALSE)

Answer 2

尝试这个：

datatable(
  df, 
  options = list(
    columnDefs = list(
      list(
        targets = 3,
        visible = FALSE
      ),
      list(
        targets = 1:2, 
        render = JS(
          'function(data, row, type, meta) {',
          '  return "<a class=\'ItemsTooltip\' href=\'www.example.com\' target=\'_blank\'><img class=\'imgTooltip\' src=\'" +', 
          '  row[3] + "\'/>" +',
          '  data + "</a>";',
          '}'
        )
      )
    )
  )
)