使用 javascript 回调滚动到数据表的给定行

Question

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

当我单击图中的相应点时，我想滚动到数据表中的给定行。但是，我遇到的最小问题是“简单地”滚动到任何行。我可以使用 JavaScript 和选项 initComplete 选择一行，但是 scrollTo() 不会为我做任何事情。

查看上一个问题，滚动到数据表 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

```

我注意到，如果您滚动之前链接的示例中的表格，底部的文本实际上会更新并显示“显示 20 个条目中的 1 到 6 个”或“显示 20 个条目中的 6 到 11 个”等这在我的示例数据表中不会发生，它总是显示“显示 200 个条目中的 1 到 200 个”。这让我认为它不会滚动到指定的行，因为所有内容都已经“在视图中”，尽管事实并非如此。

Answer 1

我不知道为什么 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

```

Answer 2

您需要在

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 3

你也可以用这个方法

this.api().table().scroller.toPosition(15);