Issues with HTML UI and rendering tables with DT / htmlwidgets

1,046 views
Skip to first unread message

Adam Struck

unread,
Jun 3, 2015, 1:16:16 PM6/3/15
to shiny-...@googlegroups.com
I am having trouble getting my datatables to render for my shiny app.  I think part of the problem is that these files can't be found:


<script src="htmlwidgets-0.4/htmlwidgets.js"></script>                                                                                                                                                                         

<link href="datatables-1.10.5/css/jquery.dataTables.min.css" rel="stylesheet" />                                                                                                                                               

<script src="datatables-1.10.5/js/jquery.dataTables.min.js"></script>                                                                                                                                                          

<script src="datatables-binding-0.0.35/datatables.js"></script>    

Here is the HTML for the datatables I am trying to render using DT:

 <div class="container-fluid">                                                                                                                                                                                                  

                        <div class="row">                                                                                                                                                                                                      

                                <div class="col-sm-2">                                                                                                                                                                                         

                                        <div id="show_vars" class="shiny-html-output"></div>                                                                                                                                                   

                                        <div id="download" class="shiny-html-output"></div>                                                                                                                                                    

                                </div>                                                                                                                                                                                                         

                                <div class="col-sm-10">                                                                                                                                                                                        

                                        <div class="well">                                                                                                                                                                                     

                                                <div class="tabbable tabs-above">                                                                                                                                                              

                                                        <ul class="nav nav-pills shiny-tab-input" id="raw_data_box">                                                                                                                           

                                                                <li class="active">                                                                                                                                                            

                                                                        <a href="#tab-2048-1" data-toggle="tab" data-value="MISO Data">MISO Data</a>                                                                                           

                                                                </li>                                                                                                                                                                          

                                                                <li>                                                                                                                                                                           

                                                                        <a href="#tab-2048-2" data-toggle="tab" data-value="Sample Metadata">Sample Metadata</a>                                                                               

                                                                </li>                                                                                                                                                                          

                                                        </ul>                                                                                                                                                                                  

                                                        <div class="tab-content">                                                                                                                                                              

                                                                <div class="tab-pane active" data-value="MISO Data" style="height: 600px; overflow: auto" id="tab-2048-1">                                                                     

                                                                        <div id="miso_data" style="width:100%; height:auto" class="datatables html-widget html-widget-output"></div>                                                           

                                                                </div>                                                                                                                                                                         

                                                                <div class="tab-pane" data-value="Sample Metadata" style="height: 600px; overflow: auto" id="tab-2048-2">                                                                      

                                                                        <div id="sample_metadata" style="width:100%; height:auto" class="datatables html-widget html-widget-output"></div>                                                     

                                                                </div>                                                                                                                                                                         

                                                        </div>                                                                                                                                                                                 

                                                </div>                                                                                                                                                                                         

                                        </div>                                                                                                                                                                                                 

                                </div>                                                                                                                                                                                                         

                        </div>                                                                                                                                                                                                                 

                </div>                                                  

Here is the server code:

 ##                                                                                                                                                                                                                                         

 ## Output miso data table                                                                                                                                                                                                                  

 ##                                                                                                                                                                                                                                         

    output$miso_data <- DT::renderDataTable({                                                                                                                                                                                                  

            data <- MISOdataInput()                                                                                                                                                                                                            

            DT::datatable(data,                                                                                                                                                                                                                

                          rownames = FALSE,                                                                                                                                                                                                    

                          options = list(searching = FALSE,                                                                                                                                                                                    

                                         lengthMenu = c(25, 50, 100, 200),                                                                                                                                                                     

                                         pageLength = 25))                                                                                                                                                                                     

    })                                                                                                                                                                                                                                         

                                                                                                                                                                                                                                               

    ##                                                                                                                                                                                                                                         

    ## Output sample metadata table                                                                                                                                                                                                            

    ##                                                                                                                                                                                                                                         

    output$sample_metadata <- DT::renderDataTable({                                                                                                                                                                                            

        data <- sample_metadata_input()                                                                                                                                                                                                        

        DT::datatable(data,                                                                                                                                                                                                                    

                      rownames = FALSE,                                                                                                                                                                                                        

                      options = list(searching = FALSE,                                                                                                                                                                                        

                                     lengthMenu = list(c(25, 50, -1), c("25", "50", "All")),                                                                                                                                                   

                                     pageLength = 25))

Anyone have any ideas why I can't get these objects to render?

Thanks!

Joe Cheng

unread,
Jun 3, 2015, 3:06:56 PM6/3/15
to Adam Struck, shiny-...@googlegroups.com
Hmmm, I don't know that anybody has tried to use htmlwidgets of any kind with plain HTML like this. The problem is that the R objects contain metadata about dependencies (the .js and .css files that aren't being found) that gets processed by Shiny when emitted by ui.R but not when it's hardcoded HTML.

Is there a reason you're not using the ui.R way? There are not many disadvantages to expressing the UI in R, and lots of advantages.

--
You received this message because you are subscribed to the Google Groups "Shiny - Web Framework for R" group.
To unsubscribe from this group and stop receiving emails from it, send an email to shiny-discus...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/shiny-discuss/8ea92710-28af-4bb3-b1c5-0a6c6e4ab51a%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Adam Struck

unread,
Jun 3, 2015, 3:17:43 PM6/3/15
to shiny-...@googlegroups.com, adamj...@gmail.com
The reason I am not using ui.R is because I embedded a genome browser into the HTML page that is transferring data to the server upon interaction and initiating a database search.  I wasn't able to figure out a way to do this when I had the ui coded in R. 

Even if I drop the requirements for the DT / htmlwidgets libraries,  the tables still don't render. 

Joe Cheng

unread,
Jun 3, 2015, 3:50:56 PM6/3/15
to Adam Struck, shiny-...@googlegroups.com
No, I wouldn't expect the tables to render without the DT/htmlwidgets libraries--they're there for a reason.

I'd go back to ui.R and use shiny::includeHTML to bring in large fragments of HTML, and HTML() or the tag building functions to create smaller or more structured snippets of HTML.

Or a less elegant solution would be to remove the dataTableOutput() equivalent from your HTML, and do a uiOutput("sample_metadata_ui") equivalent instead; and in server.R, do `output$sample_metadata_ui <- renderUI(dataTableOutput("sample_metadata"))`. I'd expect that to work.

Adam Struck

unread,
Jun 3, 2015, 6:03:30 PM6/3/15
to shiny-...@googlegroups.com, adamj...@gmail.com
The less elegant solution you proposed didn't work for me. I'll try going back to ui.R and including large chunks of HTML. 

Joe Cheng

unread,
Jun 3, 2015, 6:04:32 PM6/3/15
to Adam Struck, shiny-...@googlegroups.com
What version of Shiny, htmltools, and htmlwidgets do you have installed? (packageVersion())

Adam Struck

unread,
Jun 3, 2015, 6:37:53 PM6/3/15
to shiny-...@googlegroups.com, adamj...@gmail.com
The following versions are installed:

shiny-12.0
htmltools-2.6
htmlwidgets-0.4
DT-0.0.35

Going back to using ui.R fixed the datatable render issue, but broke the embedded genome browser. 

If I could get your other solution to work that would be much easier than diving into the javascript of the genome browser I am embedding. 

Joe Cheng

unread,
Jun 4, 2015, 2:27:03 AM6/4/15
to Adam Struck, shiny-...@googlegroups.com
There's no fundamental reason why the genome browser wouldn't work equally in both modes--it's all just HTML at the end of the day. Can you see any errors in your browser's JavaScript error console? Can you View Source in your browser for both versions and spot the relevant differences?

Adam Struck

unread,
Jun 4, 2015, 2:28:52 PM6/4/15
to shiny-...@googlegroups.com, adamj...@gmail.com
The only difference is the additional javascript and css resources for rendering data tables in that were missing before. 

There are no errors listed in the javascript console. 

Yihui Xie

unread,
Jun 17, 2015, 2:51:24 PM6/17/15
to Adam Struck, shiny-discuss
For the record, this issue was resolved at
https://github.com/rstudio/DT/issues/95

Regards,
Yihui
Reply all
Reply to author
Forward
0 new messages