闪亮的数据表回调

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