數據表按鈕和搜索框位置

Question

嗨，我正在使用數據表並使用引導樣式。 有人可以告訴我如何實現按鈕和搜索框的這種布局嗎？ （我正在使用Adobe Photoshop生成此視圖）

我試圖在javascript中更改dom

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文件...

如果只有我可以控制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>

Answer 1

從閱讀本文章開始，它解釋了對應用type=search輸入進行樣式設置的嚴格限制。 DataTables中的搜索框就是這樣的輸入。

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

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

那應該消除用戶代理在搜索框上強制的樣式。 如果沒有，您可以考慮以編程方式將框的type從search更改為text ：

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

如果您這樣做，則希望在調用DataTable方法時將該語句放在initComplete選項中的函數中（如果可以的話）（文檔不會澄清是否如果“您的表已完全初始化”），否則，您將必須使用drawCallback選項。