0
110
VistasImplement Individual column searching using JS in DTedit
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();
}
} );
} );
}
});
} );
1 Respuestas
Responde la pregunta0
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.