閃亮的數據表回調

Question

我是一個JavaScript新手的一點點，所以我無法在DataTables回調選項中使用函數來工作。

在這個小例子中，我想編寫一個javascript函數，以便當用戶在mtcars數據表中選擇一行時，如果MPG的值大於20，那麼它們將成爲「您！」。它類似於this，但該示例不使用shiny。這是我試過的：

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) 

選擇MPG大於20的行不會像我想要的那樣產生警報。我覺得我可能從根本上誤解了JavaScript如何工作int他回調選項。任何幫助，將不勝感激。

問候

Answer 1

你只需要在renderDataTable的callback參數的callback函數體（你不需要options這裏：

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!"); 
})'  
    )) 
} 

你parseFloat也是圍繞整個if條件， data[0]是汽車的名稱，將是mpg。

您可以通過使用開發人員工具和console.log在JavaScript中打印到控制檯來解決此問題。例如，您可以在if之前添加console.log(data)，並檢查它的外觀。

Answer 2

我也有代碼，我試圖將其集成到一個閃亮的應用程序。這是我迄今爲止的jsfiddle（https://jsfiddle.net/jjcole/40qLkhxg/）。它包含了來自其他人工作的例子，按行分組，添加小計，並按組分解。但是，所有報價，特別是第27行，在嘗試集成到DT包時會產生問題。有沒有人有這方面的建議或指導？我一直在想，將文件保存爲JavaScript文件並使用標記$ script來調用它可能會奏效，但我還沒有設法讓它正常工作。我創建的應用程序相當複雜，有幾個部分和選項卡。結果有幾個地方我使用數據表。有沒有辦法給R賦予一個ID或類來讓我定位這個表？

$(document).ready(function() { 
    var table = $('#example').DataTable({ 
    "columnDefs": [{ 
     "visible": false, 
     "targets": 1 
    }], 
    "order": [ 
     [2, 'asc'] 
    ], 
    "displayLength": 25, 
    "drawCallback": function(settings) { 
     var api = this.api(); 
     var rows = api.rows({ 
     page: 'current' 
     }).nodes(); 
     var last = null; 
     var subTotal = new Array(); 
     var grandTotal = new Array(); 
     var groupID = -1; 

     api.column(1, { 
     page: 'current' 
     }).data().each(function(group, i) { 
     if (last !== group) { 
      groupID++; 
      $(rows).eq(i).before(
      '<tr class="groupTR"><td class="groupTitle" colspan="3" bgcolor="lightgray">' + group + '</td></tr>' 
     ); 

      last = group; 
     } 
     //Sub-total of each column within the same grouping 
       var val = api.row(api.row($(rows).eq(i)).index()).data(); //Current order index 
       $.each(val, function (colIndex, colValue) { 
        if (typeof subTotal[groupID] == 'undefined') { 
         subTotal[groupID] = new Array(); 
        } 
        if (typeof subTotal[groupID][colIndex] == 'undefined') { 
         subTotal[groupID][colIndex] = 0; 
        } 
        if (typeof grandTotal[colIndex] == 'undefined') { 
         grandTotal[colIndex] = 0; 
        } 

        value = colValue ? parseFloat(colValue) : 0; 
        subTotal[groupID][colIndex] += value; 
        grandTotal[colIndex] += value; 
       }); 
     }); 
     $('tbody').find('.groupTR').each(function (i, v) { 
       var rowCount = $(this).nextUntil('.groupTR').length; 
       var subTotalInfo = ""; 
       for (var a = 4; a <= 7; a++) { 
        subTotalInfo += "<td class='groupTD'>" + subTotal[i][a].toFixed(0) + 
        "</td>"; 
       } 
       $(this).append(subTotalInfo); 
      }); 
    } 
    }); 

    // Order by the grouping 
    $('#example tbody').on('dblclick', '.groupTR', function() { 
    var currentOrder = table.order()[0]; 
    if (currentOrder[0] === 2 && currentOrder[1] === 'asc') { 
     table.order([2, 'desc']).draw(); 
    } else { 
     table.order([2, 'asc']).draw(); 
    } 
    }); 
     // Collapse/Expand Click Groups 
    $('#example tbody').on('click', '.groupTR', function() { 
     var rowsCollapse = $(this).nextUntil('.groupTR'); 
     $(rowsCollapse).toggleClass('hidden'); 
    }); 
});