R Shiny - 使用javascript回调滚动到给定的数据行行 [英] R Shiny - Scrolling to a given row of datatable with javascript callback

问题描述

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

I am running into an issue with datatables and shiny, specifically within a flexdashboard but I think that is irrelevant.

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

I want to scroll to a given row in the datatable when I click on the corresponding point in a plot. But, the minimal problem I have is to 'simply' scroll to any row. I can select a row using JavaScript with the option initComplete but scrollTo() will not do anything for me.

查看上一个问题，滚动到Datatable API中的特定行，我得到了这个例子， https://codepen.io/anon/pen/KWmpjj 。它展示了你可以使用initComplete的javascript函数，但这不是用R / Shiny制作的。具体来说，你会找到一个小数据表的以下选项：

Looking at a previous question, Scroll to specific row in Datatable API, I got to this example, https://codepen.io/anon/pen/KWmpjj. It showcases the javascript function you could use with initComplete , but this was not made with R/Shiny. Specifically you'll find the following option for a small datatable:

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

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

Since my goal is to use this in a flexdashboard I have a minimal example in R markdown format. A pretty standard call to DT::renderDataTable with random data. I don't understand why this.api().table().row(15).scrollTo(); will not do anything. I added an alert to confirm that the JavaScript of initComplete actually ran.

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

```

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

What I have noticed is that if you scroll the table in the previously linked example the text at the bottom will actually update and say "Showing 1 to 6 of 20 entries" or "Showing 6 to 11 of 20 entries", etc. This does not happen in my example datatable, that always says Showing 1 to 200 of 200 entries. That leads me to think that it does not scroll to the specified row because everything is already 'in view', even though it is not really.

推荐答案

你需要在中设置 scroller = TRUE 和 paging = TRUE datatable（） options 参数。这对我有用：

You need to set scroller = TRUE and paging = TRUE in the datatable() options argument. This is working for me:

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

这篇关于R Shiny - 使用javascript回调滚动到给定的数据行行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！