Question

我是一个javascript新手，所以我无法在DataTables回调选项中使用函数。

在这个小例子中，我想写一个javascript函数，这样当用户选择mtcars数据表中的一行时，如果MPG的值大于20，那么它们就是一个警告＆＃34;对你有好处！＆＃34;。它与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如何在回调选项中工作。任何帮助将不胜感激。

此致

Answer 1

您只需要callback的{{1}}参数callback函数的正文（此处不需要renderDataTable：

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。

您可以使用开发人员工具和javascript中的data[1]打印到控制台来解决此问题。例如，您可以在console.log之前添加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');
    });
});

闪亮的DataTable回调

2 个答案: