在R Shiny DT Datatable中为JavaScript添加条件判断的问题

问题原因 #

你使用$cell.data.length判断单元格内容长度是完全错误的：

• $cell.data是jQuery的数据操作方法（本质是一个函数），它的length属性代表该函数的参数个数（固定为1），和单元格的实际内容长度没有任何关系。
• 这就导致你设置>1时，条件判断逻辑错误触发了所有单元格效果；设置>2时，因为1>2永远为假，所以所有单元格都不生效。

修正代码 #

要判断单元格内容长度，需要获取单元格的实际文本内容。结合你已经把内容包裹在.content容器里的逻辑，直接用$content.text().length即可（加trim()可以排除前后空白的干扰）。修正后的完整代码如下：

library(DT)
library(shinipsum)

text_df <- data.frame(
  numbers = 1:3,
  letters = LETTERS[1:3],
  text    = c(
    "Lorem", 
    substr(shinipsum::lorem, 1, 100), 
    substr(shinipsum::lorem, 1, 5000)
  )
)

js <- "
function(cell) {
  var $cell = $(cell);
  $cell.contents().wrapAll('<div class=\"content\"></div>');
  var $content = $cell.find('.content');
  // 基于单元格实际文本长度判断，trim()去除前后空白避免误判
  if($content.text().trim().length > 10){
    $cell.append($('<button>Read more</button>'));
    var $btn = $cell.find('button');
    $content.css({
      height: '20px',
      overflow: 'hidden'
    });
    $cell.data('isLess', true);
    $btn.click(function () {
      var isLess = $cell.data('isLess');
      $content.css('height', isLess ? 'auto' : '20px');
      $(this).text(isLess ? 'Read less' : 'Read more');
      $cell.data('isLess', !isLess);
    });
  } 
}"
datatable(
  text_df,
  rownames = FALSE,
  options = list(
    "columnDefs" = list(
      list(
        "targets" = 2,
        "createdCell" = JS(js)
      )
    )
  )
)

额外优化点 #

• 给$btn添加var声明，避免污染全局变量
• 收起时的高度改回20px，和初始高度保持一致，逻辑更统一

内容的提问来源于stack exchange，提问作者RTS