Отображать значение ячейки во всплывающей подсказке после наведения курсора на ячейку в 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)

Dale Kube 26.08.2018 источник

comment

Не могли бы вы предоставить MCVE? - SBista 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());
            }")))

Stéphane Laurent 04.09.2018

comment

Да, первое решение именно оно! Это дает пользователю возможность навести указатель мыши на ячейку и увидеть ее полное значение в виде всплывающей подсказки. Это удобно для столбцов, содержащих очень большие / длинные значения; Я могу сделать свою таблицу более компактной, скрывая лишние символы и позволяя пользователям видеть полные значения (при необходимости) с помощью всплывающей подсказки. - Dale Kube; 18.09.2018

comment

@DaleKube FYI, плагин многоточие теперь доступен в новой версии DT. Я еще не пробовал, но, похоже, это полезно для вашей проблемы. - 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 )")
    ))
  )
)