在DTETIT中使用JS实施单个列搜索

Question

在我的数据表中，我想实现此页面中显示的单个列搜索：

​>过滤器参数。因此，我正在尝试使用datatable.options.options参数dtedit来实现单个列搜索。

在dtedit中，我可以将JS代码与以下代码合并：

jsc <- `Some JS code`

dtedit(input,
       output,
       name = "input_table",
       thedata = design,
       ...,
       datatable.options = list(initComplete = JS(jsc))
)

我的JS技能不存在，并且我需要帮助弄清楚如何在我的dtedit中使用以下JS代码

$(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#example tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );
 
    // DataTable
    var table = $('#example').DataTable({
        initComplete: function () {
            // Apply the search
            this.api().columns().every( function () {
                var that = this;
 
                $( 'input', this.footer() ).on( 'keyup change clear', function () {
                    if ( that.search() !== this.value ) {
                        that
                            .search( this.value )
                            .draw();
                    }
                } );
            } );
        }
    });
 
} );

Answer 1

这是我将如何处理dt软件包：

initComplete <- "
function(settings) {
  var table = settings.oInstance.api();
  var ncol = table.columns().count();
  var append = function (i) {
    var column = table.column(i);
    var colname = column.header().textContent;
    var $input = $(
      '<input type=\\\"text\\\" placeholder=\\\"Search ' + colname + '\\\" />'
    );
    $(column.footer()).append($input);
    $input.on('keyup change clear', function () {
      if (column.search() !== this.value) {
        column.search(this.value).draw();
      }
    });
  };
  for (var i = 1; i < ncol; i++) {
    append(i);
  }
}
"

dat <- iris
sketch <- htmltools::withTags(table(
  class = 'display',
  thead(
    tr(
      lapply(c("", names(dat)), th)
    )
  ),
  tfoot(
    tr(
      lapply(rep("", 1+ncol(dat)), th)
    )
  )
))

datatable(
  dat,
  container = sketch,
  options = list(
    initComplete = JS(initComplete),
    columnDefs = list(
      list(targets = "_all", className = "dt-center")
    )
  )
)

我不熟悉dtedit。但是我看了一下文档，看来它不接受容器选项。不幸的是，不可能将页脚添加到使用JavaScript的DataTable中。