带有DT的R datatable rowCallback

Question

我试图使用DT和magrittr包对数据表对象执行两个不同的格式化操作。 一个使用辅助函数formatRound（），另一个作为JavaScript传递给datatable函数中的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”未被识别，因为它超出了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');
       }
     }"
        )
    )
)