2017-12-20 7 views
2

flextashboard 내에서 datatables와 반짝이는 문제가 발생했습니다.하지만 그럴 생각은 없습니다.R 반짝이 - 자바 스크립트 콜백을 사용하여 지정된 행의 데이터 테이블로 스크롤

플롯에서 해당 지점을 클릭하면 데이터 테이블의 주어진 행으로 스크롤하고 싶습니다. 그러나, 내가 가지고있는 최소한의 문제는 '단순히'어떤 행으로 스크롤하는 것입니다. initComplete 옵션을 사용하여 JavaScript를 사용하여 행을 선택할 수 있지만 scrollTo()은 나를 위해 아무 것도하지 않습니다.

이전 질문 (Scroll to specific row in Datatable API)을 보면이 예제가 있습니다 (https://codepen.io/anon/pen/KWmpjj). 그것은 initComplete와 함께 사용할 수있는 자바 스크립트 기능을 보여 주지만 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의 자바 스크립트가 실제로 실행되었는지 확인하기 위해 알림을 추가했습니다.

--- 
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 테이블을 이동하면 하단에 텍스트가 실제로 업데이트하고 "6 ~ 20의 항목 표시 1"또는 "11 (20)의 항목에 6 표시"말할 것입니다 등등. 이것은 내 예제 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 
관련 문제