2017-12-20 11 views
2

私はdatatablesと光沢のある、特にflexdashboardの問題に遭遇していますが、私はそれは無関係だと思います。R Shiny - javascriptコールバックを使用してデータテーブルの特定の行にスクロール

プロット内の対応するポイントをクリックすると、データテーブルの特定の行にスクロールしたいと考えています。しかし、私が持っている最小限の問題は、「単純に」どの行にでもスクロールすることです。私はオプションinitCompleteでJavaScriptを使用して行を選択できますが、scrollTo()は私のために何もしません。

前の質問(Scroll to specific row in Datatable API)を見ると、私はこの例になりました。https://codepen.io/anon/pen/KWmpjjです。 initCompleteで使用できるjavascript関数が紹介されていますが、R/Shinyでは作成されていません。私の目標は、私はRマークダウン形式で最小限の例を持ってflexdashboardでこれを使用することですので

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

:具体的に、あなたは、小さなデータテーブルのための次のオプションを見つけることができます。ランダムなデータを持つDT::renderDataTableのかなり標準的な呼び出しです。 this.api().table().row(15).scrollTo();が何もしない理由は分かりません。 initCompleteのJavaScriptが実際に実行されたことを確認する警告を追加しました。私が気づいたことは、あなたがpreviously linked exampleでテーブルをスクロールする場合は下部のテキストが実際に更新され、「1〜20の6のエントリを表示する」または「6〜20の11のエントリを表示」と言うだろうということです

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

``` 

これは、私の例のdatatableでは起こりません。これは、常に200件のうち1〜200件を表示しています。それは、たとえそれが実際ではないとしても、すべてが既に「表示中」であるため、指定された行にスクロールしないと思うようになります。

答えて

0

引数datatable()optionsには、scroller = TRUEpaging = 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 
関連する問題