将引导程序的字形添加到数据表的输入搜索字段

Question

我已经成功地将数据表与引导程序合并（感谢数据表的出色文档！）。我现在想在输入搜索字段中使用引导程序的字形图标。为此，我需要放置一个带有<i class="icon-search"></i> 的图标。有没有简单的方法来实现这一点？

我尝试过的事情是：

$(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 } );
} );

但这会将图标本身放置在输入字段内。

我想将输入字段包装为：

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

Answer 1

我在 bootstrap 3 中遇到了同样的问题。 我发现将 boostrap 3 input-group 和 input-group-addon 添加到数据表长度菜单或搜索输入的解决方案是将此代码添加到数据表插件选项中：

    $('#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>',
            ...
        }
    });

搜索输入缺少</div>，但导航器会自动检测并为您完成。我没有找到如何使用插件选项添加结束</div>。

自定义数据表的所有选项都可以在此处获得：http://www.datatables.net/reference/option/

我希望它会为你们中的一些人节省时间和精力；）

Answer 2

将“oLanguage”添加到您的 javascript 中，例如：

$(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>' }
    });
} );