jquery - 在 Shiny App 中显示包含 DataTables 的 HTML 页面

标签 jquery r datatables shiny

作为我 Shiny 的应用程序的数据预处理的结果,我生成了 .Rbin 和一个简短的 .html 报告,其中包含一些信息和一些表格(使用 DataTables)。该报告始终是独立的文件,但现在我想将其包含在 Shiny 的应用程序中。我花了很长时间解决这个问题,得到的唯一结果是问题出在 DataTables 上。

这是我的问题的一个简单示例:

表.html

(部分不是强制性的 - 一切都在 ui.R 中解决)

<html>
<head>
    <title> Test table </title>

<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" class="init">
  $(document).ready(function() {
      $('#example').DataTable();
  } );
</script>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.6/css/jquery.dataTables.css">

</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Salary</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>Tiger</td>
                <td>Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett</td>
                <td>Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton</td>
                <td>Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric</td>
                <td>Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td>Cara</td>
                <td>Stevens</td>
                <td>Sales Assistant</td>
                <td>New York</td>
                <td>$145,600</td>
            </tr>
            <tr>
                <td>Hermione</td>
                <td>Butler</td>
                <td>Regional Director</td>
                <td>London</td>
                <td>$356,250</td>
            </tr>
            <tr>
                <td>Lael</td>
                <td>Greer</td>
                <td>Systems Administrator</td>
                <td>London</td>
                <td>$103,500</td>
            </tr>
            <tr>
                <td>Jonas</td>
                <td>Alexander</td>
                <td>Developer</td>
                <td>San Francisco</td>
                <td>$86,500</td>
            </tr>
            <tr>
                <td>Shad</td>
                <td>Decker</td>
                <td>Regional Director</td>
                <td>Edinburgh</td>
                <td>$183,000</td>
            </tr>
            <tr>
                <td>Michael</td>
                <td>Bruce</td>
                <td>Javascript Developer</td>
                <td>Singapore</td>
                <td>$183,000</td>
            </tr>
            <tr>
                <td>Donna</td>
                <td>Snider</td>
                <td>Customer Support</td>
                <td>New York</td>
                <td>$112,000</td>
            </tr>
        </tbody>
    </table></body></html>

ui.R

shinyUI(fluidPage(

  tags$head(
    tags$script(src="aa.js"),
    tags$script(src="https://code.jquery.com/jquery-1.11.1.min.js"),
    tags$script(src="http://cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js"),
    tags$link(rel = 'stylesheet', type = 'text/css', href = "http://cdn.datatables.net/1.10.6/css/jquery.dataTables.css")
  ),


  titlePanel("Testing datatable HTML"),

  mainPanel(
    htmlOutput("inc")
  )
))

服务器.R

shinyServer(function(input, output) {
  getPage<-function() {
    return(includeHTML("table.html"))
  }
  output$inc<-renderUI({getPage()})
})

aa.js

$(document).ready(function() {
    $('#example').DataTable();
} );

最佳答案

用数据表替换数据表

$(document).ready(function() {
    $('#example').dataTable();
} );

关于jquery - 在 Shiny App 中显示包含 DataTables 的 HTML 页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29647173/

相关文章:

jquery - 如何在单列的 jquery 数据表插件上添加下拉过滤器?

javascript - 如何在 JavaScript 函数中使用 Angular 变量作为参数

javascript - 使用 HTML id 与 JS 变量进行比较?

list - 如何列出R中的一部分对象?

json - 将不完整列表解析为具有两个不同问题的数据帧

r - 临时键入 data.table 以进行合并

jquery - DataTables & Droppable hit-zone off-center

jQuery 数据表 : how to delete the row

javascript - 简单的错误但非常烦人的 appendTo

javascript - 无法读取未定义 ckeditor 的属性 'getComputedStyle'