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

Posted 2023-03-24

【中文标题】调整/更新过滤器选择以适应闪亮的 DT 数据表中已应用的过滤器

【英文标题】：Adapt/update filter choices to already applied filters in shiny DT datatable

【发布时间】：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：用户体验

我们的仪表板已经很满了，有侧边栏、图表和表格。本机过滤器功能非常适合这种布局。不幸的是，添加额外的过滤器框看起来不是很好。

【参考方案1】：

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

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

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