javascript - 带 DT 的 R 数据表 rowCallback

Question

我正在尝试使用 DT 和 magrittr 包对数据表对象执行两种不同的格式化操作。一个使用辅助函数 formatRound()，另一个作为 JavaScript 传递给数据表函数中的 rowCallback 选项。

当我单独运行任一格式化操作时，数据表以预期的格式呈现。但是，当我同时运行两者时，数据表呈现空白，但我没有收到错误。

这段代码展示了我所描述的行为。

library(magrittr)
library(DT)

df = data.frame(matrix(rnorm(20), nrow=10))

datatable(
  data = df
) %>%
  formatRound(c("X1", "X2"), 1)

#table renders as expected

datatable(
  data = df,
  options = list(
    rowCallback = JS("
     function( row, data, index ) {
       if ( index > 2 ) {
        $(row).css('background-color', '#EDEDED');
       }
       else if ( index > 0 ) {
        $(row).css('background-color', '#DEDEDE');
       }
       else {
        $(row).css('background-color', '#D3D3D3');
       }
     }"
    )
  )
)

#table renders as expected

datatable(
  data = df,
  options = list(
    rowCallback = JS("
     function( row, data, index ) {
      if ( index > 2 ) {
        $(row).css('background-color', '#EDEDED');
      }
      else if ( index > 0 ) {
        $(row).css('background-color', '#DEDEDE');
      }
      else {
        $(row).css('background-color', '#D3D3D3');
      }
     }"
    )
  )
) %>%
  formatRound(c("X1", "X2"), 1)

#table renders as blank but with no error returned

Answer 1

如果你在浏览器的 JS 控制台中查看你第三次尝试的 JS 函数(点击“浏览器中的检查元素选项”)，它会显示一个错误，说 'var' is unidentified because it is outside the JS函数的范围:

(
var d = parseFloat(data[1]); $(this.api().cell(row, 1).node()).html(isNaN(d) ? '' : d.toFixed(1));
var d = parseFloat(data[2]); $(this.api().cell(row, 2).node()).html(isNaN(d) ? '' : d.toFixed(1));
     function( row, data, index ) {
      if ( index > 2 ) {
        $(row).css('background-color', '#EDEDED');
      }
      else if ( index > 0 ) {
        $(row).css('background-color', '#DEDEDE');
      }
      else {
        $(row).css('background-color', '#D3D3D3');
      }
     })

如果将这两行代码放在 JS 函数中，它会完美运行。

您可以在下面找到更新后的代码。

datatable(
    data = df,
    options = list(
        rowCallback = JS("
     function( row, data, index ) {
        var d = parseFloat(data[1]); 
        $(this.api().cell(row, 1).node()).html(isNaN(d) ? '' : d.toFixed(1));
        var d = parseFloat(data[2]); 
        $(this.api().cell(row, 2).node()).html(isNaN(d) ? '' : d.toFixed(1));
       if ( index > 2 ) {
        $(row).css('background-color', '#EDEDED');
       }
       else if ( index > 0 ) {
        $(row).css('background-color', '#DEDEDE');
       }
       else {
        $(row).css('background-color', '#D3D3D3');
       }
     }"
        )
    )
)