Предотвращение пропуска html-документа R .rmd при использовании таблиц данных во вкладках - PullRequest
1 голос
/ 13 мая 2019

Я вяжу файл HTML из .rmd с таблицами, созданными с помощью пакета R DT в наборах вкладок. Перед запуском вкладок есть куча информации, поэтому пользователь должен прокрутить их вниз, что нормально. Проблема заключается в том, что при прокрутке достаточно далеко, чтобы показать всю таблицу на первой вкладке, нажатие на следующую вкладку заставляет страницу перейти обратно к заголовку таблицы, поэтому пользователь должен прокрутить вниз вниз, чтобы показать таблицу, что раздражает несколькими вкладками и длинными таблицами.

Вот мой .rmd:

---
title: "Tab Testing"
output: html_document
---

# Some random text {.tabset}

```{r, echo=FALSE}
knitr::opts_chunk$set(echo=FALSE)
# libraries
library(DT)
# bunch of random text
textFun <- function(n = 5000) {
  a <- do.call(paste0, replicate(5, sample(LETTERS, n, TRUE), FALSE))
  paste0(a, sprintf("%04d", sample(9999, n, TRUE)), sample(LETTERS, n, TRUE))
}

rText <- textFun(500)
```
Scroll down and see how the page skips when selecting Tab 2.

`r rText`

## Tab 1

```{r}
datatable(mtcars)
```
## Tab 2

```{r}
datatable(iris)
```

После того, как я щелкну все вкладки, страница будет зависать при переключении вкладок, поэтому я подозреваю, что мне нужно немного JavaScript или JQuery, чтобы загрузить таблицы до нажатия вкладок, чтобы заставить страницу залипать в первой место. Я попытался добавить этот чанк после первого чанка кода, но он ничего не сделал:

```{js}
$(document).ready(function() {
    $('table.display').DataTable();
} );
```

Я осмотрелась в https://datatables.net/examples/basic_init/, но не увидела ничего, что могло бы помочь мне (или признать это как таковое). Любые указатели в правильном направлении были бы превосходны.

1 Ответ

0 голосов
/ 13 мая 2019

Тестировали ли вы добавлять что-то после каждой вкладки? Может быть, это уменьшит эффект пропуска.

Как:

## Tab 1

```{r}
datatable(mtcars)
```

<div style="height:500px;display:block;"> </div>

## Tab 2

```{r}
datatable(iris)
```

<div style="height:500px;display:block;"> </div>
...