4

データテーブルをブートストラップに組み込むことに成功しました (データテーブルの優れたドキュメントのおかげです!)。入力検索フィールドにブートストラップのグリフィコンを使用したいと思います。これを行うには、アイコンを配置する必要があります<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>
4

2 に答える 2

7

次のように、JavaScript に「oLanguage」を追加します。 

$(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>' }
    });
} );
于 2013-12-04T22:30:44.193 に答える