时间戳

首页 > 解决方案 > 调整/更新过滤器选择以适应闪亮的 DT 数据表中已应用的过滤器

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

问题描述

我正在使用包 DT 在 r shiny 中显示一个表格。当我在一列中应用过滤器时，其他列的过滤器选择不适应已经过滤的表。因此，在下面的示例中，如果您使用 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 中工作以及在哪里插入代码片段。

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

帮助将不胜感激。

标签： javascriptrshinydatatablesdt

解决方案

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

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

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

推荐阅读