Показване на стойността на клетката в подсказка, след като задържите курсора на мишката върху клетка в DT::datatable

Как да използвам javascript, за да покажа стойността на клетката в подсказка, след като задържа курсора на мишката над определена клетка в DT::datatable? Реших да скрия дългия текст след достигане на определена ширина (overflow-x: hidden; white-space: nowrap;), за да поддържам чист формат и бих искал потребителят да може да види пълния текст, ако избере да задържи курсора на мишката върху дадена клетка.

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

r javascript datatables shiny dt
person Dale Kube    schedule 26.08.2018    source източник
comment
Бихте ли предоставили MCVE?   -  person SBista    schedule 29.08.2018

Отговори (2)


arrow_upward
1
arrow_downward

Бихте ли опитали това:

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());
            }")))
person Stéphane Laurent    schedule 04.09.2018
comment
Да, първото решение е то! Това предоставя начин на потребителя да задържи курсора на мишката върху клетка и да види пълната й стойност като подсказка. Той е полезен с колони, които съдържат много големи/дълги стойности; Мога да запазя таблицата си по-компактна, като скрия излишните знаци и позволя на потребителите да виждат пълните стойности (ако е необходимо) с подсказката. - person Dale Kube; 18.09.2018
comment
@DaleKube FYI, плъгинът ellipsis вече е наличен в новата версия на DT. Все още не съм пробвал, но изглежда, че е полезно за вашия проблем. - person Stéphane Laurent; 07.12.2018

arrow_upward
3
arrow_downward

Ето решение с новодостъпния плъгин елипса.

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

person Stéphane Laurent    schedule 11.12.2018
comment
Това е страхотно. Благодаря ти! - person Dale Kube; 19.12.2018