闪亮的数据表过滤盒

Question

我创建了一个看起来与屏幕截图相同的表格。 如何添加一个类似 excel 的过滤器按钮，以便我可以选择列表中的多个特定项目？

代码如下：

DT::datatable(current_list,
              rownames = FALSE, 
              filter = 'top',
              options = list(pageLength = 50,lengthChange = FALSE,autoWidth = FALSE,escape=FALSE, searching = TRUE,
                             columnDefs = list(list(className = 'dt-center', targets = 0:1),
                                               list(width = '30px', targets = 0:0),
                                               list(width = '270px', targets = 1:1)
                                               )
                             )

              )

Answer 1

library(DT)

dat <- iris

sketch <- htmltools::tags$table(
  tableHeader(c("",names(dat))),
  tableFooter(rep("", 1+ncol(dat)))
)

js <- c(
  "function(){", 
  "  this.api().columns().every(function(){",
  "    var column = this;",
  "    var select = $('<select multiple=\"multiple\"><option value=\"\"></option></select>')",
  "      .appendTo( $(column.footer()).empty() )", 
  "      .on('change', function(){",
  "        var vals = $('option:selected', this).map(function(index,element){",
  "          return $.fn.dataTable.util.escapeRegex($(element).val());",
  "        }).toArray().join('|');",
  "        column.search(vals.length > 0 ? '^('+vals+')$' : '', true, false).draw();",
  "      });",
  "    column.data().unique().sort().each(function(d,j){",
  "      select.append('<option value=\"'+d+'\">'+d+'</option>')",
  "    });",
  "  });",
  "}")

datatable(dat, container=sketch, 
          options = list(
            initComplete = JS(js)
          )
)

编辑

行名是字符串，然后按如下方式排序：1, 10, 100, .... 不好。使用以下代码，它们没有排序，这样更好：

js <- c(
  "function(){", 
  "  this.api().columns().every(function(i){",
  "    var column = this;",
  "    var select = $('<select multiple=\"multiple\"><option value=\"\"></option></select>')",
  "      .appendTo( $(column.footer()).empty() )", 
  "      .on('change', function(){",
  "        var vals = $('option:selected', this).map(function(index,element){",
  "          return $.fn.dataTable.util.escapeRegex($(element).val());",
  "        }).toArray().join('|');",
  "        column.search(vals.length > 0 ? '^('+vals+')$' : '', true, false).draw();",
  "      });",
  "    var data = column.data();",
  "    if(i == 0){",
  "      data.each(function(d,j){",
  "        select.append('<option value=\"'+d+'\">'+d+'</option>');",
  "      });",
  "    }else{",
  "      data.unique().sort().each(function(d,j){",
  "        select.append('<option value=\"'+d+'\">'+d+'</option>');",
  "      });",
  "    }",
  "  });",
  "}")