This are DataTables https://datatables.net/forums/discussion/23922/assign-an-id-to-the-search-input
I have an implementation in Vue3 project but I am not able to fix some I mean bugs in there. It should be simple but I am not able to get any dynamically generated elements in there. For example needs to add class to the search input. According the link I mentioned above the code I use looks like
setDataTable() {
var table = $('#myTable');
if( this.dataTableObject ) return this.dataTableObject.draw();
this.dataTableObject = table.DataTable({
'responsive': true,
"pageLength": 10,
...
});
// Both selectors are empty.
$('.dataTables_wrapper').find('input');
}
Before the code I import the required libraries
import "datatables.net-bs4/css/dataTables.bootstrap4.css"
import 'datatables.net-bs4'
But selector is empty. Hope somebody will know cause I spend the whole day on it without any success. Thanks.
My solution is based on draw event.
this.dataTableObject.on('draw', function(e) {
$(this).closest('.dataTables_wrapper')
.removeClass('form-inline')
.find('.col-xs-12').addClass('col-12');
});
DataTables forum says that I have old DTBootstrap4 version. So I am curious what they answer in the question I asked them. Cause this is really dirty code.
this element is easyly editable, I've added 'style="background: green"' for the input search ant it worked.
Try to set property by property using:
document.getElementById("p2").style.color="blue";
Or try change entire class using:
document.getElementById("p2").className = "classname";