I am trying to follow along with the logic of this post: DataTables example - Individual column searching (text inputs) in order to create search boxes for each of my columns. I realize this process is in two steps: we need to make the search boxes themselves, and then make them functional using the initComplete method.
I've tried using document on ready or putting the check boxes within a callback but I don't think that's quite right.... any help appreciated!!
library(shiny)
# https://datatables.net/examples/api/multi_filter.html
# we need to set up the input boxes
# and then call the initComplete method
# but I am not sure of the order to do this in!
ui <- fluidPage(
DT::dataTableOutput("styled"),
tags$style(HTML(
"tfoot input {
width: 100%;
padding: 3px;
box-sizing: border-box;
}"))
)
# Define server logic required to draw a histogram
server <- function(input, output) {
output$styled <- DT::renderDataTable(mtcars,
options = list(
initComplete = DT::JS("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();
}
});
});
}")
),
callback = DT::JS('table.each( function () {
var title = $(this).text();
$(this).html( "<input type="text" placeholder="Search "+title+"" />" );})'),
)
}
# Run the application
shinyApp(ui = ui, server = server)
