将bootstrap的图标添加到Datatable输入搜索字段中

Question

我已经成功地将 datatables 与 bootstrap 结合使用（感谢 datatables 出色的文档！）。我现在想要在搜索输入框中使用 bootstrap 的 glyphicons。为了实现这一点，我需要放置一个带有 <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>

- Ratan Kumar

---

你能给我们一个可工作的例子吗？我猜你需要调整datatables的CSS样式。 - joseph

请看这个链接：http://jsfiddle.net/C4ZY3/3/。我想要的是DataTables搜索输入框变成这个形式。 - Ratan Kumar

或像这样http://jsfiddle.net/chne9/1/ - Ratan Kumar

Answer 1

我曾经在使用bootstrap 3时遇到了同样的问题。针对datatable中长度菜单或搜索输入框等需要添加boostrap 3 input-group和input-group-addon的情况，我找到了一个解决方案，即将以下代码添加到dataTable插件选项中：

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

搜索框缺少一个 标签，但是导航器会自动检测并为您完成它。我没有找到如何添加结束的 标签，使用插件选项。

在此处可用所有自定义数据表选项：http://www.datatables.net/reference/option/ 希望这将为您节省时间和精力;)

- Okipa

---

这个很好用，但是搜索图标与搜索输入框之间有一些空隙，尽管lengthMenu工作得非常完美。你有什么想法为什么会这样？ - shell

这正是我一直在寻找的！我花了几个小时尝试在背景中使用SVG图像等，而这个方法却完美地解决了问题，而且省去了99592349倍的麻烦。先生，祝您愉快。 - bkunzi01

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

- Travis Glover

---

非常感谢您提供的非常简单的答案 :-) - reticentroot