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",
    }
});

但是get就是这样......我很难改变搜索框html结构

click here

我无法利用由datatables创建的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

首先阅读this，其中解释了对应用了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选项。

数据表按钮和搜索框位置

1 个答案: