R Shiny DT技术问询：选中行切换显示状态及pageLength代理访问问题

当然可以实现这个需求！不用纠结pageLength的proxy访问问题，我们可以直接借助DT的JavaScript API，配合行选中事件来完成这个交互逻辑。

核心思路 #

1. 监听表格的行选中事件，当用户选中某一行时，隐藏所有未被选中的行；
2. 当用户再次点击同一行取消选中时，恢复所有行的显示；
3. 因为是前端直接控制行的显示状态，完全不需要依赖proxy操作pageLength。

完整代码示例（Shiny环境下） #

library(shiny)
library(DT)

ui <- fluidPage(
  DTOutput("my_table")
)

server <- function(input, output, session) {
  output$my_table <- renderDT({
    # 构造示例数据
    df <- iris
    
    datatable(df,
              selection = "single", # 只允许选中一行
              callback = JS('
                table.on("row.dt", function(e, row, data, index) {
                  // 获取当前选中的行数
                  var selectedCount = table.rows({selected:true}).count();
                  
                  if(selectedCount === 1) {
                    // 隐藏所有未选中的行
                    table.rows().every(function() {
                      if(!this.selected()) {
                        $(this.node()).css("display", "none");
                      }
                    });
                  } else {
                    // 取消选中时，恢复所有行显示
                    table.rows().every(function() {
                      $(this.node()).css("display", "table-row");
                    });
                  }
                });
              ')
    )
  })
}

shinyApp(ui, server)

代码说明 #

• selection = "single"：限制用户只能选中一行，避免多选中的复杂情况；
• table.on("row.dt", ...)：监听DT的行选中/取消触发事件；
• table.rows({selected:true}).count()：判断当前是否有选中行；
• $(this.node()).css("display", "none")：通过CSS样式隐藏未选中的行；
• 取消选中时，把所有行的display属性恢复为table-row，让它们重新显示。

额外提示 #

这个方案会保留表头的正常显示，因为我们只操作表格的行元素。另外，这种前端控制的方式响应速度更快，不需要和后端交互，体验更流畅。

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