简体   繁体   English

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

[英]Display HTML page containing DataTables in Shiny App

as a result of my data pre-processing for my shiny app I'm generating .Rbin and a short .html report with some info and a few tables (using DataTables). 由于对闪亮的应用程序进行了数据预处理,因此生成了.Rbin和简短的.html报告,其中包含一些信息和一些表(使用DataTables)。 The report was always stand alone file, but now I want to include it in the shiny app. 该报告始终是独立文件,但是现在我想将其包含在闪亮的应用程序中。 I've spent quite a while solving this problem and the only result I got is that problem is with DataTables. 我花了很长时间解决这个问题,而我得到的唯一结果就是该问题与DataTables有关。

This is a simple example of my problem: 这是我的问题的一个简单示例:

table.html table.html

(the < head > part is not obligatory - everything is solved in ui.R) (<head>部分不是必需的-一切都在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 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")
  )
))

server.R server.R

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

aa.js aa.js

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

Replaces DataTable by dataTable 用dataTable替换DataTable

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM