Is there a way to adjust the search and show inputs for datatables so that I can customize their width and make them fit my dynamic column sizing? The issue I ran into is that these inputs are enclosed within <label> tags in the source JavaScript, and removing the label tags causes the input to disappear. Is there a proper way to remove the label tags without losing the input?
This snippet from the source JavaScript file showcases the problematic section:
function pb(a) {
var b = a.oClasses,
c = a.sTableId,
d = a.oLanguage,
e = a.oPreviousSearch,
f = a.aanFeatures,
g = '<input type="search" class="' + b.sFilterInput + '"/>',
j = d.sSearch,
j = j.match(/_INPUT_/) ? j.replace("_INPUT_", g) : j + g,
b = h("<div/>", {
id: !f.f ? c + "_filter" : null,
"class": b.sFilter
}).append(h("<label/>").append(j)),
f = function() {
var b = !this.value ?
"" : this.value;
b != e.sSearch && (fa(a, {
sSearch: b,
bRegex: e.bRegex,
bSmart: e.bSmart,
bCaseInsensitive: e.bCaseInsensitive
}), a._iDisplayStart = 0, O(a))
},
g = null !== a.searchDelay ? a.searchDelay : "ssp" === y(a) ? 400 : 0,
i = h("input", b).val(e.sSearch).attr("placeholder", d.sSearchPlaceholder).bind("keyup.DT search.DT input.DT paste.DT cut.DT", g ? Oa(f, g) : f).bind("keypress.DT", function(a) {
if (13 == a.keyCode) return !1
}).attr("aria-controls", c);
h(a.nTable).on("search.dt.DT", function(b, c) {
if (a === c) try {
i[0] !== I.activeElement && i.val(e.sSearch)
} catch (d) {}
});
return b[0]
}
The initial code when the page loads is as follows:
<div class="row">
<div class="col-sm-12">
<div id="table_filter" class="dataTables_filter pull-left">
<label>
<input type="search" class="form-control input-sm" placeholder="Search" aria-controls="table">
</label>
</div>
</div>
</div>
As seen above, the search input is nested under a label tag. If you have any suggestions on how to detach it from the label to match column sizes appropriately, I would greatly appreciate it.