R - 使用javascript进行数据表格式化

时间:2017-05-02 13:31:45

标签: javascript css r

我尝试使用DT包格式化R中的数据表。 我有这样的代码:

library(data.table)
library(DT)
data<-data.table(rbind(c(1,2,3),c(4,5,6)))
colnames(data)<- c('A','B','c')

datatable(data, rownames=F, 
      colnames=c('A','B','C'),
      class='stripe cell-border hover', 
      options=list(
        pageLength=100, 
        dom='ltp', 
        initComplete = JS("
                          function(settings, json) {
                          $(this.api().table().body()).css({
                          'background-color': 'red',
                          'outline-color': 'red',
                          'margin':'100px',
                          'color': 'violet',
                          'text-align': 'center',
                          'font-family': 'Courier New',
                          'border-radius': '25px'
                          });
                          $(this.api().table().header()).css({
                          'background-color': '#000',
                          'color': '#fff',
                          'outline-color': 'red',
                          'margin':'100px',
                          'text-align': 'center',
                          'font-family': 'Courier New',
                          'border-radius': '25px'
                          });
                          }
                          ")
        ), 
      caption = htmltools::tags$caption(
        style = 'caption-side: top; text-align: center; color:black; 
        font-size:200% ;','Table'),
      filter=list(position = 'top')
      )

我在函数JS()中遇到javascript问题。它修改背景颜色(但仅限于标题),字体颜色和样式。但是,对齐文本或圆角的命令不起作用。

为什么会这样? 如何修改代码以格式化其他内容?

1 个答案:

答案 0 :(得分:2)

这似乎是bug,但是有一个及时投资组合here使用prependContent中的函数htmlwidgets提出了一种解决方法。

library(data.table)
library(DT)
library(htmlwidgets) #Load htmlwidgets package

data<-data.table(rbind(c(1,2,3),c(4,5,6)))
colnames(data)<- c('A','B','c')

id <- paste0("dt-",htmlwidgets:::createWidgetId()) #Create an id name
dt <- datatable(data, rownames=F, elementId = id,  #Assign id name to datatable
      colnames=c('A','B','C'),
      class='stripe cell-border hover', 
      options=list(
        pageLength=100, 
        dom='ltp', 
        initComplete = JS("
                          function(settings, json) {
                          $(this.api().table().body()).css({
                          'background-color': 'red',
                          'outline-color': 'red',
                          'margin':'100px',
                          'color': 'violet',
                          'text-align': 'center',
                          'font-family': 'Courier New',
                          'border-radius': '25px'
                          });
                          $(this.api().table().header()).css({
                          'background-color': '#000',
                          'color': '#fff',
                          'outline-color': 'red',
                          'margin':'100px',
                          'text-align': 'center',
                          'font-family': 'Courier New',
                          'border-radius': '25px'
                          });
                          }
                          ")
        ), 
      caption = htmltools::tags$caption(
        style = 'caption-side: top; text-align: center; color:black; 
        font-size:200% ;','Table'),
      filter=list(position = 'top')
      )

然后您运行htmlwidgets::prependContent

prependContent(
  dt,
  tags$style(sprintf(
    '#%s .dt-right {
    text-align: center;
}',id)))

最终结果: