datatables按鈕和搜索框位置

嗨，我使用數據表和使用引導樣式。任何人都可以告訴我如何爲我的按鈕和搜索框實現這種佈局？（我使用Adobe Photoshop來產生這種觀點）datatables按鈕和搜索框位置

我試圖改變DOM的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", 
    } 
});

，但得到的是這樣的...我有時間難以改變搜索框HTML結構

我只是不能打入，通過數據表創建的HTML結構..和有很難有時間去試圖瞭解整個數據表jQuery的文件...

如果只有我可以通過閱讀this控制HTML結構，那麼我相信，HTML代碼將是這樣的......

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

來源

2016-07-27 Laurensius Tony

開始這解釋了對type=search應用於輸入的輸入樣式的相當嚴格的限制。 DataTables中的搜索框就是這樣一個輸入。

這來自鏈接的文章。將此CSS添加到您的樣式表中：

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

這應該取消用戶代理在搜索框上強制的樣式。如果沒有，你可能會考慮編程改變框的type從search到text：

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

如果你再打，你會希望把本聲明的函數時initComplete選項如果你可以避開它，那麼你可以調用DataTable方法（如果「你的表已經完全初始化了」，那麼文檔沒有說明是否所有的標記都被繪製了）。如果沒有，你將不得不使用drawCallback選項。

來源

2016-07-27 03:10:10 BobRodes

datatables按鈕和搜索框位置

回答

相關問題