Shiny DataTable Callback

Question

I am a little bit of a javascript novice so I am having trouble getting a function in DataTables callback option to work.

In this small example, I want to write a javascript function so that when a user selects a row in the mtcars datatable, if the value of MPG is greater than 20, for their to be an alert that says "Good for you!". It is similar to this, but that example doesn't use shiny. Here is what I tried:

library(shiny)
library(DT)
server <- function(input, output) {
    output$one <- DT::renderDataTable(mtcars,options=list(callback=DT::JS(
      'function(table) {
      table.on("click.dt","tr", function() {
      var data=table.row(this).data();
      if (parseFloat(data[0]>20.0))      
        alert("Good for you!");
      });}'    
      )))
}

ui <- fluidPage(mainPanel(DT::dataTableOutput("one")))
shinyApp(ui = ui, server = server) 

Selecting rows with MPG greater than 20 does not produce the alert like I want. I feel like I may be fundamentally misunderstanding how the javascript works int he callback option. Any help would be appreciated.

Regards

Answer 1

You just need the body of the callback function in the callback argument of renderDataTable (you don't need options here:

    server <- function(input, output) {
        output$one <- DT::renderDataTable(mtcars,callback=JS(
                'table.on("click.dt","tr", function() {
                var data=table.row(this).data();
                if (parseFloat(data[1])>20.0)      
                 alert("Good for you!");
})'    
      ))
}

Your parseFloat was also around the whole if condition, and data[0] is the name of the cars, data[1] will be the mpg.

You can troubleshoot this by using developer tools and console.log in your javascript to print to the console. You could for example add console.log(data) before your if and check what it looks like.