R Shiny - 使用javascript回調滾動到給定的數據表行

Question

我遇到了數據表和閃亮的問題，特別是在 flexdashboard 中，但我認為這無關緊要。

當我單擊繪圖中的相應點時，我想滾動到數據表中的給定行。 但是，我遇到的最小問題是“簡單地”滾動到任何行。 我可以使用帶有 initComplete 選項的 JavaScript 選擇一行，但scrollTo()不會為我做任何事情。

查看上一個問題， 滾動到 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

```

我注意到的是，如果您在先前鏈接的示例中滾動表格，底部的文本實際上會更新並顯示“顯示 20 個條目中的 1 到 6 個”或“顯示 20 個條目中的 6 到 11 個”等。這確實在我的示例數據表中不會發生，它總是顯示 Showing 1 to 200 of 200 個條目。 這讓我認為它不會滾動到指定的行，因為一切都已經“在視圖中”，即使它不是真的。

Answer 1

您需要在datatable() options參數中設置scroller = TRUE和paging = TRUE 。 這對我有用：

---
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

```

Answer 3

你也可以使用這個方法

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