时间戳

首页 > 解决方案 > 如何在 r shiny 中使用 JS 数据表 API？

javascript - 如何在 r shiny 中使用 JS 数据表 API？

问题描述

我一直在尝试将 api 用于 r shiny 中的 javascript 包数据表。每当我运行我的代码时，我都会收到一条错误消息，指出无法识别 .DataTable()。下面是我的代码在 R 中的样子：

library(readxl)
library(shiny)
library(dplyr)
library(DT)

summary_table <- read.csv("summary")[, c("GSN", "Category", "Study.Level")] %>% 
                                mutate_at(c("GSN", "Category", "Study.Level"), as.factor);
summary_data_table <- DT::datatable(summary_table, filter =  "top");

ui <- basicPage(
    tags$div(DTOutput("summary_table"), id = "example"),
    tags$head(HTML("<script>var table = $('summary_table').DataTable();</script>"))
)

print(ui)

server <- function(input, output) {
    output$summary_table <- DT::renderDataTable(summary_data_table);
}

shinyApp(ui = ui, server = server)

R 在生成 HTML 时似乎已经以正确的顺序包含了必要的依赖项。这是它产生的头部：

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <script type="application/shiny-singletons"></script>
  <script type="application/html-dependencies">jquery[3.5.1];shiny-css[1.6.0];shiny-javascript[1.6.0];htmlwidgets[1.5.1];datatables-css[0.0.0];datatables-binding[0.15];crosstalk[1.1.0.1];bootstrap[3.4.1]</script>
<script src="shared/jquery.min.js"></script>
<link href="shared/shiny.min.css" rel="stylesheet">
<script src="shared/shiny.min.js"></script>
<script src="htmlwidgets-1.5.1/htmlwidgets.js"></script>
<link href="datatables-css-0.0.0/datatables-crosstalk.css" rel="stylesheet">
<script src="datatables-binding-0.15/datatables.js"></script>
<link href="crosstalk-1.1.0.1/css/crosstalk.css" rel="stylesheet">
<script src="crosstalk-1.1.0.1/js/crosstalk.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="shared/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="shared/bootstrap/accessibility/css/bootstrap-accessibility.min.css" rel="stylesheet">
<script src="shared/bootstrap/js/bootstrap.min.js"></script>
<script src="shared/bootstrap/accessibility/js/bootstrap-accessibility.min.js"></script>  <script>var table = $('summary_table').dataTable();</script>
<link rel="stylesheet" type="text/css" href="dt-core-1.10.20/css/jquery.dataTables.min.css"><link rel="stylesheet" type="text/css" href="dt-core-1.10.20/css/jquery.dataTables.extra.css"><script src="dt-core-1.10.20/js/jquery.dataTables.min.js"></script><link rel="stylesheet" type="text/css" href="nouislider-7.0.10/jquery.nouislider.min.css"><script src="nouislider-7.0.10/jquery.nouislider.min.js"></script><link rel="stylesheet" type="text/css" href="selectize-0.12.0/selectize.bootstrap3.css"><script src="selectize-0.12.0/selectize.min.js"></script></head>
</head>

最终，我正在寻找一个简单的例子，说明有人在加载 R Shiny 应用程序时获得 .DataTable 以在控制台中不返回错误。这是错误的样子。

Uncaught TypeError: $(...).dataTable is not a function
    at (index):19

这个问题一直让我发疯。 谢谢大家的帮助！

标签： javascriptrshinydatatablesdt

解决方案

idsummary_table不是表的 id，而是它的容器的 id。尝试

tags$head(
  HTML(
    "<script>$(document).ready(function(){var table = $('#summary_table').find('table').DataTable();});</script>"
  )
)

推荐阅读