将鼠标悬停在DT :: datatable中的单元格后，在工具提示中显示单元格值

Question

将鼠标悬停在DT :: datatable中的特定单元格上后，如何使用JavaScript在工具提示中显示单元格值？我决定在达到一定宽度（overflow-x: hidden; white-space: nowrap;）后隐藏长文本，以保持整洁的格式，如果用户选择将鼠标悬停在给定的单元格上，我希望用户能够看到全文。

datatable(df,
          class="compact",
          selection="none",
          rownames=F,
          colnames=NULL,
          options=list(dom="t",
                       pageLength=10
          ),
          escape=F)

Answer 1

您能尝试一下吗？

datatable(head(iris), 
          options=list(initComplete = JS("function(settings) {var table=settings.oInstance.api(); table.$('td').each(function(){this.setAttribute('title', $(this).html())})}")))

这为每个单元格设置了一个工具提示。

要为单个特定单元格设置工具提示，

datatable(head(iris), 
          options=list(initComplete = JS(
            "function(settings) {
            var table = settings.oInstance.api();
            var cell = table.cell(2,2);
            cell.node().setAttribute('title', cell.data());
            }")))

Answer 2

这是新提供的插件省略号的解决方案。

library(DT) # version 0.5

dat <- data.frame(
  A = c("fnufnufroufrcnoonfrncacfnouafc", "fanunfrpn frnpncfrurnucfrnupfenc"),
  B = c("DZDOPCDNAL DKODKPODPOKKPODZKPO", "AZERTYUIOPQSDFGHJKLMWXCVBN")
)

datatable(
  dat, 
  plugins = "ellipsis",
  options = list(
    columnDefs = list(list(
      targets = c(1,2),
      render = JS("$.fn.dataTable.render.ellipsis( 17, false )")
    ))
  )
)

插件的文档：https://datatables.net/plug-ins/dataRender/ellipsis