使用带searchHighlight选项的DT列筛选后部分字符串消失问题

问题现象 #

使用DT组件的顶部列筛选功能（filter = "top"）并开启searchHighlight = TRUE选项时，会出现以下异常：

• 在列筛选框输入内容（如test1）完成筛选后
• 清除筛选内容或点击筛选框的清除按钮
• 表格中几乎所有行的test字符串会消失

复现代码 #

library(DT)

df <- data.frame(
  test_chr = paste0('test', 1:10)
)

datatable(
  df,
  filter = "top",
  options = list(
    searchHighlight = TRUE
  )
)

问题原因 #

searchHighlight的高亮逻辑会修改单元格的HTML结构，而列筛选的清除操作未正确重置这些DOM修改，导致原始文本无法恢复。

修复方案 #

通过添加自定义JavaScript代码，在列筛选清除时强制重置单元格的原始内容：

library(DT)

df <- data.frame(
  test_chr = paste0('test', 1:10)
)

datatable(
  df,
  filter = "top",
  options = list(
    searchHighlight = TRUE,
    initComplete = JS(
      "function(settings, json) {
        // 监听列筛选清除按钮点击事件
        $('.dt-button-collection .clear-filter').on('click', function() {
          setTimeout(() => {
            const table = settings.oInstance.api();
            // 遍历所有列和单元格，重置为原始数据
            table.columns().every(function() {
              this.cells().every(function() {
                this.data(this.data());
              });
            });
          }, 100);
        });
        
        // 监听筛选框输入事件，输入为空时重置内容
        $('.filter input').on('input', function() {
          if ($(this).val() === '') {
            setTimeout(() => {
              const table = settings.oInstance.api();
              table.columns().every(function() {
                this.cells().every(function() {
                  this.data(this.data());
                });
              });
            }, 100);
          }
        });
      }"
    )
  )
)

效果说明 #

添加上述代码后，无论通过清除筛选框内容还是点击清除按钮取消筛选，表格都会自动重置所有单元格的内容为原始文本，不会再出现字符串消失的问题。

内容的提问来源于stack exchange，提问作者Stéphane Laurent