R Shiny中如何设置DT数据表从用户指定行开始显示

问题描述 #

基于DT包搭建的Shiny数据表格应用，默认从第1行开始渲染展示，需要实现以下效果：

• 根据滑块输入的行号（对应input$startRow），将选中行作为表格首屏顶部的起始显示行，例如选择50时首屏第一行显示原数据集的第50行
• 不对原始数据集做任何行截取，用户仍可通过上下滚动查看完整的faithful数据集
• 已知原生displayStart参数逻辑匹配需求，但Scroller扩展存在初始显示位置偏移的已知bug，直接配置该参数无法得到准确结果

可运行实现代码 #

方案核心是绕开有bug的配置项，通过前端JS调用Scroller原生滚动方法实现精准定位，同时避免滑块调整时全表重渲染导致的卡顿：

library(shiny)
library(DT)
data("faithful")

ui <- fluidPage(
  h2("选择表格起始显示行"),
  sliderInput(inputId="startRow",
              label="选择表格首屏显示的第一行序号",
              min = 1,
              max = nrow(faithful),
              value = 100,
              step=5),
  h2("数据展示表格"),
  dataTableOutput("table1"),
  # 注册前端滚动跳转监听
  tags$script(HTML(
    "Shiny.addCustomMessageHandler('scrollToTargetRow', function(rowIndex){
      const dtInstance = $('#table1').DataTable();
      dtInstance.one('draw.dt', function(){
        dtInstance.scroller().scrollToRow(rowIndex, false);
      });
      dtInstance.draw(false);
    });"
  ))
)

server <- function(input, output, session) {
  # 表格仅初始化一次，不随滑块变动重渲染
  output$table1 <- renderDataTable({
    datatable(
      faithful,
      extensions = "Scroller", 
      options = list(
        scrollY = 300,
        scroller = TRUE,
        # 表格初始化完成后通知服务端
        initComplete = JS(
          "function(){
            Shiny.setInputValue('tableInitDone', true, {priority: 'event'});
          }"
        )
      )
    )
  })
  
  # 首次加载完成后定位到默认选中行
  observeEvent(input$tableInitDone, {
    session$sendCustomMessage("scrollToTargetRow", input$startRow - 1)
  })
  
  # 滑块调整时实时跳转位置
  observeEvent(input$startRow, {
    req(input$tableInitDone)
    session$sendCustomMessage("scrollToTargetRow", input$startRow - 1)
  })
}

# 启动应用
shinyApp(ui = ui, server = server)

方案关键点说明 #

• 索引适配：DataTables内部使用0开始的行索引，R侧滑块输入是1开始的自然行号，跳转前统一做减1处理，避免行号错位
• 性能优化：表格只在页面加载时渲染一次，行跳转完全在前端执行，不会触发服务端数据重算，操作无卡顿
• 兼容性：绕开了Scroller扩展displayStart参数的位置偏移bug，跳转位置精准
• 数据完整性：全程未对原始faithful数据集做截取，用户可自由滚动查看全部272条数据

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