如何旋转除前两列之外的标题？

Question

我遵循了一些问题R数据表旋转标题未对齐，但我不确定如何将参数

start, end

添加到

headerCallback

。我确实有一些柱子不需要旋转 180 度。

headerCallback <- c(
  "function(thead, data, start, end, display){",
  "  var $ths = $(thead).find('th');",
  "  $ths.css({'vertical-align': 'bottom', 'white-space': 'nowrap'});",
  "  var betterCells = [];",
  "  $ths.each(function(){",
  "    var cell = $(this);",
  "    var newDiv = $('<div>', {height: 'auto', width: cell.height()});",
  "    var newInnerDiv = $('<div>', {text: cell.text()});",
  "    newDiv.css({margin: 'auto'});",
  "    newInnerDiv.css({",
  "      transform: 'rotate(180deg)',",
  "      'writing-mode': 'tb-rl',",
  "      'white-space': 'nowrap'",
  "    });",
  "    newDiv.append(newInnerDiv);",
  "    betterCells.push(newDiv);",
  "  });",
  "  $ths.each(function(i){",
  "    $(this).html(betterCells[i]);",
  "  });",
  "}"
)

datatable(mtcars %>% mutate(name = row.names(mtcars),
                            id = row_number()) %>% select(id,name, everything()), 
          rownames = F, 
          class = list(stripe = FALSE),
          options = list(
            paging = F, autoWidth = F,
            searching= FALSE,
            scrollX = F,
            # initComplete = JS("function(settings, json) {
            #                     $(this.api().table().header()).css({
            #                       'font-size' : '12px'});}"),
            headerCallback = JS(headerCallback))) %>% 
  formatStyle(columns = c(1:10), `font-size` = '12px')

Answer 1

我无法使用回调方法让它工作，但是

datatable

是一个

htmlwidget

，所以我能够使用

htmlwidgets::onRender()

让它工作。

这里的大部分 JS 与您问题中的代码相同。主要区别在于

thead

不再是变量...它是一个元素，因此添加引号并不太困难。然而，当

datatable

构建时，它实际上构建了两张表，一张用于标题，一张用于主表。奇怪的。因此，我添加了

first

，以便第一个

thead

是唯一被查询的。这让我们：

$('thead:first')

然后我们必须

find

th

元素。我不知道您不想旋转多少标题，我也不认为您在实际项目中使用了

mtcars

数据，所以我有一个示例说明如何执行此操作，但如果您的需要更强大的东西（例如，您有 50 个标头或其他东西），请告诉我。

在

find

中，我添加了条件。由于您旋转的标签可能比不旋转的标签多，因此我使用

:not

从旋转标签的代码中删除了一些标签。我已经删除了此表中的前两个，因此使用元素属性

aria-label

来表示“id”和“name”。 （例如，这是

id

标头的完整属性：

aria-label="id: activate to sort column ascending"

。） 在代码中，我使用了

^=

，它相当于 以 + 标签 +“:”开头。

这让我们：

$('thead:first').find('th:not([aria-label^=\"id:\"], [aria-label^=\"name:\"])');

\"

只是为了逃避此处所需的第三级引号。在 JS 中，您可以使用或不使用

\"

，但在 R 中需要它。

这是表格和 JS。 R 代码中的唯一区别是删除了回调函数。当然，JS 查询是不同的，变量名称也是如此。

library(DT)
library(tidyverse)

datatable(mtcars %>% mutate(name = row.names(mtcars),
                            id = row_number()) %>% select(id,name, everything()), 
          rownames = F, 
          class = list(stripe = FALSE),
          options = list(
            paging = F, autoWidth = F,
            searching= FALSE,
            scrollX = F
          )) %>% 
  formatStyle(columns = c(1:10), `font-size` = '12px') %>% 
  htmlwidgets::onRender(
    "function(el, x) { /* don't move labels for id and name column */
      var $ths = $('thead:first').find('th:not([aria-label^=\"id:\"], [aria-label^=\"name:\"])');
      var newCells = [];
      $ths.each(function() {
        var cell = $(this);
        var newD = $('<div>', {height: 'auto', width: cell.height()});
        var newInD = $('<div>', {text: cell.text()});
        newD.css({margin: 'auto'});
        newInD.css({
          transform: 'rotate(180deg)',
          'writing-mode': 'tb-rl',
          'white-space': 'nowrap'
        });
        newD.append(newInD);
        newCells.push(newD);
      });
      $ths.each(function(i){
        $(this).html(newCells[i]);
      });
    }"
  )