调整/更新过滤器选择以适应闪亮的 DT 数据表中已应用的过滤器答案

【问题标题】：Adapt/update filter choices to already applied filters in shiny DT datatable调整/更新过滤器选择以适应闪亮的 DT 数据表中已应用的过滤器
【发布时间】：2020-01-12 00:22:46
【问题描述】：

我正在使用包 DT 在 r 中显示一个闪亮的表格。当我在一列中应用过滤器时，其他列的过滤器选择不适应已经过滤的表。因此，在下面的示例中，如果您使用 4.3 ... 4.8 过滤 sepal.length，即使没有 sepal.length 介于 4.3 和 4.8 之间且为“virginica”的条目，您仍然可以选择过滤物种“virginica”。当您要过滤超过 100 个级别的因子列时，这尤其麻烦。

对于这个问题，已经有一个用 JavaScript 编写的解决方案。见此链接：https://datatables.net/forums/discussion/27541/update-select-filters 以及解决方案的现场演示：http://live.datatables.net/xehimatu/1/edit 但是我不知道如何在闪亮中实现这一点。

这是 Iris 数据集的一个小示例。

library(shiny)
library(DT)

ui <- fluidPage(
  fluidRow(column(12, DTOutput("table"))
  )
)

server <- function(input, output, session) {
  output$table <- renderDT({

    DT::datatable(iris, filter = "top")
  })
}

shinyApp(ui, server)

如何调整 JavaScript 代码以使此功能在 Shiny 中工作，以及在哪里插入代码 sn-p。

# function of the live demo in the link above

$(document).ready(function() {
  var table = $('#example').DataTable( {
    initComplete: function () {
      this.api().columns().every( function () {
        var column = this;
        var select = $('<select><option value=""></option></select>')
          .appendTo( $(column.footer()).empty() )
          .on( 'change', function () {
            var val = $.fn.dataTable.util.escapeRegex(
              $(this).val()
            );

            column
              .search( val ? '^'+val+'$' : '', true, false )
              .draw();
          } );

        column.data().unique().sort().each( function ( d, j ) {
          select.append( '<option value="'+d+'">'+d+'</option>' );
        } );
      } );
    }
  } );

  table.on('draw', function () {
    table.columns().indexes().each( function ( idx ) {
      var select = $(table.column( idx ).footer()).find('select');

      if ( select.val() === '' ) {
        select
          .empty()
          .append('<option value=""/>');

        table.column(idx, {search:'applied'}).data().unique().sort().each( function ( d, j ) {
          select.append( '<option value="'+d+'">'+d+'</option>' );
        } );
      }
    } );
  } );
} );

非常感谢您的帮助。

【问题讨论】：

如果您只有因子列，那么这可以通过创建自己的过滤框来实现（即不使用datatable 的filter 选项）。但是，如果您想使用datatable 的filter 选项（带有滑块）过滤数值，我认为这需要修改DT 包的所有代码。
我也想过，但出于用户体验的考虑，我决定不这样做。
我不明白。 “用户体验”是什么意思？
UX：用户体验
我们的仪表板已经很满了，有侧边栏、图表和表格。本机过滤器功能非常适合这种布局。不幸的是，添加额外的过滤器框看起来不是很好。

标签： javascript r shiny datatables dt

【解决方案1】：

我发现以下示例具有另一个功能（行详细信息）。我将尝试遵循相同的逻辑（尽管我对 JS 没有经验）。如果你成功了，请告诉我们：

HTML 加 Javascript https://datatables.net/examples/api/row_details.html

相同但在 R 中实现 https://rstudio.github.io/DT/002-rowdetails.html

【讨论】：