Блестящий набор фильтров данных

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>');",
  "      });",
  "    }",
  "  });",
  "}")