Implement Individual column searching using JS in DTedit

Question

In my datatable, I would like to implement individual column searching shown in this page:

https://datatables.net/examples/api/multi_filter.html

I am using DTedit R package, an extension to DT, and it doesn't have the convenient filter argument. So, I am trying to use the datatable.options argument inside dtedit to implement individual column searching.

In dtedit, I can incorporate JS code with the following code:

jsc <- `Some JS code`

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

My JS skills are non existent and I need help on figuring out how to use the following JS code in my dtedit

$(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

Here is how I would do with the DT package:

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")
    )
  )
)

I am not familiar with DTedit. But I took a look at the doc and it seems that it doesn't accept the container option. And unfortunately, it's not possible to add a footer to a datatable with JavaScript.