数据表按钮和搜索框位置答案

【问题标题】：datatables button and search box position数据表按钮和搜索框位置
【发布时间】：2016-07-27 02:46:11
【问题描述】：

您好，我正在使用数据表和引导样式。谁能告诉我如何为我的按钮和搜索框实现这种布局？（我正在使用 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",
    }
});

但是get是这样的……我很难改变搜索框的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>

【问题讨论】：

标签： javascript jquery html css datatable

【解决方案1】：

从阅读this 开始，它解释了应用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 选项。

【讨论】：