Question

我遇到了数据表和闪亮的问题，特别是在flexdashboard中，但我认为这是无关紧要的。

当我点击绘图中的相应点时，我想滚动到数据表中的给定行。但是，我遇到的最小问题是“简单地”＃39;滚动到任何一行。我可以使用带有initComplete选项的JavaScript选择一行，但scrollTo()对我没有任何作用。

查看上一个问题Scroll to specific row in Datatable API，我得到了这个例子，https://codepen.io/anon/pen/KWmpjj。它展示了你可以使用initComplete的javascript函数，但这不是用R / Shiny制作的。具体来说，您将为小型数据表找到以下选项：

initComplete: function () {
        this.api().row(14).scrollTo();
      $(this.api().row(14).node()).addClass('selected');
    }

由于我的目标是在flexdashboard中使用它，我在R markdown格式中有一个最小的例子。使用随机数据对DT::renderDataTable进行非常标准的调用。我不明白为什么this.api().table().row(15).scrollTo();不会做任何事情。我添加了一个警告，以确认initComplete的JavaScript实际上已运行。

---
title: "Scroll to row in datatable"
date: "20 december 2017"
output: html_document
runtime: shiny
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

## Datatable automatically scroll to given row
The goal is to have a datatable rendered in a flexdashboard. Upon selecting a point in a scatter plot, the corresponding row in the table gets selected and needs to be scrolled into view. Selecting a row by clicking a point in a plot (with ggplot) works, but scrolling will not.

Preferably without using shinyApp(), since scrolling is a JavaScript functionality rather than a shiny one (?).

```{r}
library(dplyr)
library(DT)

# Generate random data
df <- data.frame(matrix(runif(1000), ncol = 5))

# Render datatable with shiny
DT::renderDataTable({
  DT::datatable(df,
  extensions = 'Scroller',
  # selection = 'single',                 # Eventually only allow single selection
  escape = FALSE,
  # callback = JS('this.api().row(15).scrollTo();'),       # Attempt to use callback instead
  options = list(scrollX = TRUE,
                 scrollY = 200,
                 paging = FALSE,
                 initComplete  = JS('function() {
                                   $(this.api().table().row(15).node()).addClass("selected");
                                   this.api().table().row(15).scrollTo();
                                  alert("scrolled");}')))},
  server = TRUE) # Setting server = TRUE results in the selection with initComplete breaking

```

我注意到，如果您在previously linked example中滚动表格，则底部的文字会实际更新并说出＆＃34;显示20个条目中的1到6个＆＃34;或者＆＃34;显示20个条目中的6到11个＆＃34;等。这不会发生在我的示例数据表中，它总是说显示200个条目中的1到200个。这导致我认为它不会滚动到指定的行，因为一切都已经在视图中，即使它不是真的。

Answer 1

您需要在scroller = TRUE paging = TRUE参数中设置datatable()和options。这对我有用：

---
title: "Scroll to row in datatable"
date: "20 december 2017"
output: html_document
runtime: shiny
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

## Datatable automatically scroll to given row
The goal is to have a datatable rendered in a flexdashboard. Upon selecting a point in a scatter plot, the corresponding row in the table gets selected and needs to be scrolled into view. Selecting a row by clicking a point in a plot (with ggplot) works, but scrolling will not.

Preferably without using shinyApp(), since scrolling is a JavaScript functionality rather than a shiny one (?).

```{r}
library(dplyr)
library(DT)

# Generate random data
df <- data.frame(matrix(runif(1000), ncol = 5))

# Render datatable with shiny
DT::renderDataTable({
  DT::datatable(df,
  extensions = 'Scroller',
  # selection = 'single',                 # Eventually only allow single selection
  escape = FALSE,
  # callback = JS('this.api().row(15).scrollTo();'),       # Attempt to use callback instead
  options = list(scrollX = TRUE,
                 scrollY = 200,
                 paging = TRUE,
                 scroller = TRUE,
                 initComplete  = JS('function() {
                                   $(this.api().table().row(15).node()).addClass("selected");
                                   this.api().table().row(15).scrollTo();
                                  alert("scrolled");}')))},
  server = TRUE) # Setting server = TRUE results in the selection with initComplete breaking

Answer 2

我不知道为什么DataTables的.scrollTo()方法不起作用，但是我只是在HTML节点上测试了原生.scrollIntoView()方法，它对我来说很好用。我改变了你

this.api().table().row(15).scrollTo();

到

this.api().table().row(15).node().scrollIntoView();

完整示例：

---
title: "Scroll to row in datatable"
date: "20 december 2017"
output: html_document
runtime: shiny
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

## Datatable automatically scroll to given row
The goal is to have a datatable rendered in a flexdashboard. Upon selecting a point in a scatter plot, the corresponding row in the table gets selected and needs to be scrolled into view. Selecting a row by clicking a point in a plot (with ggplot) works, but scrolling will not.

Preferably without using shinyApp(), since scrolling is a JavaScript functionality rather than a shiny one (?).

```{r}
library(dplyr)
library(DT)

# Generate random data
df <- data.frame(matrix(runif(1000), ncol = 5))

# Render datatable with shiny
DT::renderDataTable({
  DT::datatable(df,
  extensions = 'Scroller',
  # selection = 'single',                 # Eventually only allow single selection
  escape = FALSE,
  # callback = JS('this.api().row(15).scrollTo();'),       # Attempt to use callback instead
  options = list(scrollX = TRUE,
                 scrollY = 200,
                 paging = FALSE,
                 initComplete  = JS('function() {
                                   $(this.api().table().row(15).node()).addClass("selected");
                                   this.api().table().row(15).node().scrollIntoView();
                                  }')))},
  server = TRUE) # Setting server = TRUE results in the selection with initComplete breaking

```

R Shiny - 使用javascript回调滚动到给定的数据行行

2 个答案: