Показывать значение ячейки во всплывающей подсказке после наведения на ячейку в DT :: datatable - PullRequest
Новая
       13

Показывать значение ячейки во всплывающей подсказке после наведения на ячейку в DT :: datatable

0 голосов
/ 26 августа 2018

Как использовать 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)

Ответы [ 2 ]

0 голосов
/ 11 декабря 2018

Вот решение с новым плагином многоточие . 

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 )")
    ))
  )
)

enter image description here

Документация по плагину: https://datatables.net/plug-ins/dataRender/ellipsis

0 голосов
/ 04 сентября 2018

Не могли бы вы попробовать это: 

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());
            }")))
...