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 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>

• javascript
• twitter-bootstrap
• datatable

• Can you give us a working example? I'm guessing you need to play with the datatables CSS. – joseph Commented May 22, 2013 at 16:35
• jsfiddle/C4ZY3/3 .. see this i want dataTables search input box to be of this form. – Ratan Kumar Commented May 22, 2013 at 16:38
• or like this jsfiddle/chne9/1 – Ratan Kumar Commented May 22, 2013 at 16:39

2 Answers 2

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 plete 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/reference/option/

I hope it will save time and energy for some of you ;)

Add "oLanguage" to your javascript like:

$(document).ready(function() {
    $('.datatable').dataTable({
        "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
        "sPaginationType": "bootstrap",
        "oLanguage": { "sSearch": '<i class="icon-search"></i>' }
    });
} );