“数据表”按钮和搜索框位置
“数据表”按钮和搜索框位置
提问于 2016-07-27 10: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结构。
我只是不能进入由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>回答 1
Stack Overflow用户
回答已采纳
发布于 2016-07-27 11:10:11
首先阅读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选项。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38602873
复制相关文章
相似问题
腾讯云开发者
