datatablesボタンと検索ボックスの位置

Question

こんにちは私はdatatablesを使用して、ブートストラップスタイリングを使用しています。誰も私のボタンと検索ボックスのこの種のレイアウトを達成する方法を教えてください。

私はjavascriptの

var table = $('#dataTables-example').DataTable({ 
    dom: '<"col-sm-12"B><"col-sm-12"f>t', 
    select: true, 
    scrollY: '80vh', 
    scrollX: true, 
    "autoWidth": false, 
    scrollCollapse : true, 
    paging : false, 
    stateSave : true, 
    order : [[ 0, "asc" ]], 
    buttons: [], 
    language: { 
     buttons : {}, 
     select:{ 
      rows:{ 
       _: "", 
       0: "", 
       1: "" 
      } 
     }, 
     "emptyTable": "Tidak terdapat data di tabel", 
     "info": "", 
     "infoEmpty": "", 
     "infoFiltered": "", 
     "search": "<i class='fa fa-search'></i>", 
     "paginate": { 
      "next":  ">", 
      "previous": "<" 
     }, 
     "zeroRecords": "Tidak ditemukan data yang sesuai", 
    } 
}); 

でDOMを変更するが、このようなものです取得しようとしている（私はこのビューを生成するために、Adobe Photoshopのを使用しています）...私は、検索を変更するには苦労して私はちょうどのDataTableが作成したHTML構造を活用することはできませんボックスのHTML構造

..と唯一の私はHTML構造を制御することができ、私はhtmlコードは次のようになると信じている場合スタートthisを読むことによって

<div class="col-sm-12"> 
     <div class="btn-group"> 
      //the button in here 
     </div> 
    </div> 
    <div class="col-sm-12"> 
     <div class="input-group"> 
      <div class="input-group-addon"><i class="fa fa-search"></i></div> 
      <input type="text" class="form-control" placeholder="search term...." /> 
     </div> 
    </div> 
    <div class="col-sm-12"> 
     //table in here 
    </div> 

Answer 1

... ...全体のDataTableにjqueryのファイルを理解しようとする

を苦労してこれは、type=searchが適用された入力のスタイリングのかなり厳しい制限を説明しています。 DataTablesの検索ボックスはそのような入力です。

これはリンクされた記事に由来します。

input[type=search] { 
    -moz-appearance:none; 
    -webkit-appearance:none; 
} 

これは、ユーザーエージェントが検索ボックスで強制するスタイリングをキャンセルするはずです。そうでない場合は、textにsearchからボックスのtypeを変更するプログラムで検討するかもしれない：

$('.datatables_filter input').attr('type', 'text'); 

あなたはそれに頼る場合、あなたはときinitCompleteオプションで関数内のステートメントを置くことになるでしょう（テーブルが完全に初期化されていれば、すべてのマークアップが描画されているかどうかは明らかではありません）drawCallbackオプションを使用する必要があります。