1

I've been attempting to utilise the api for the the javascript package datatables within r shiny. Whenever I run my code, I get an error saying that .DataTable() is not recognised. Below is what my code looks like in 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 seems to already include the necessary dependencies in the correct order when it generates the HTML. Here is the head that it produces:

<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>

Ultimately, I'm looking for a simple example of where someone has gotten .DataTable to not return an error in the console as they load an R Shiny app. Here's what the error looks like.

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

This problem has been driving me insane. Thank you all for your help!

Stéphane Laurent
  • 75,186
  • 15
  • 119
  • 225
David Blair
  • 25
  • 4
  • Have you seen this post ? https://stackoverflow.com/questions/31227844/typeerror-datatable-is-not-a-function – Alexandre Léonard Aug 31 '21 at 19:54
  • @AlexandreLéonard I had, but now that I go back to it I see there's a lot more answered than I first realised. I'll go through them and get back to you. Cheers. – David Blair Aug 31 '21 at 19:57

1 Answers1

0

The id summary_table is not the id of the table, but of its container. Try

tags$head(
  HTML(
    "<script>$(document).ready(function(){var table = $('#summary_table').find('table').DataTable();});</script>"
  )
)
Stéphane Laurent
  • 75,186
  • 15
  • 119
  • 225
  • Sadly no luck. We get the same sort of error as last time: (index):19 Uncaught TypeError: $(...).find(...).DataTable is not a function at (index):19 – David Blair Aug 31 '21 at 19:42
  • @DavidBlair See my edit. I forgot the `$(document).ready`. – Stéphane Laurent Aug 31 '21 at 19:46
  • Thanks for your help. This time I get "jquery.min.js:2 jQuery.Deferred exception: $(...).find(...).DataTable is not a function TypeError: $(...).find(...).DataTable is not a function" as well as the original error lower down the console. – David Blair Aug 31 '21 at 19:50
  • Hmm that's a delaying issue. `setTimeout(function(){var table = $('#summary_table').find('table').DataTable();}, 1000);` works. – Stéphane Laurent Aug 31 '21 at 20:21