I have successfully incorporated datatables with bootstrap(thanks to datatable's excellent documentation!). I would now like to use bootstrap's glyphicons for the input search field . To do this, I need to place an icon with <i class="icon-search"></i>
. Is there an easy way to achieve this?
things i have tried is :
$(document).ready(function() {
$('#table').dataTable( {
sDom: '<"icon-search"r><"H"lf>t<"F"ip>',
oLanguage: {sSearch: ""},
"bPaginate": false,
"bLengthChange": false,
"bFilter": true,
"bSort": false,
"bInfo": false,
"bAutoWidth": false } );
} );
but this places the icon as such not inside the input field.
I want to wrap the input field as :
<div class="control-group">
<label class="control-label" for="inputIcon">Search : </label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-envelope"></i></span>
<input class="span2" id="inputIcon" type="text">
</div>
</div>
</div>
I had the same problem for bootstrap 3.
The solution I found to add boostrap 3 input-group
and input-group-addon
to the datatable lenght menu or search input for example is to add this code into the dataTable plugin options :
$('#yourTableId').dataTable({
'language': {
search: '<div class="input-group"><span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>',
searchPlaceholder: 'Your placeholder...',
lengthMenu: '<div class="input-group"><span class="input-group-addon"><span class="glyphicon glyphicon-list"></span></span>_MENU_</div>',
...
}
});
A </div>
is missing for the search input but the navigator auto-detect this and complete it for you. I didn't find out how to add the closing </div>
, using the plugin options.
All the option to custom dataTable are available here : http://www.datatables.net/reference/option/
I hope it will save time and energy for some of you ;)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With