我正在尝试将一些额外的元素添加到我的数据表网格的标题中,除了搜索框向下移动一行外,一切正常。我怎样才能使单选按钮居中,并使搜索框与其他按钮显示在同一行?跟<"Clear">有关系吗?
这是 JS:
$(document).ready(function () {
var tbl = $('#EACApprovalGrid').dataTable({
"bProcessing": true,
"bDeferRender": true,
"oLanguage": {
"sSearch": "Search:",
},
"iDisplayLength": 25,
"bStateSave": false,
"sPaginationType": "full_numbers",
"aaSorting": [[5, "asc"]],
"sDom": '<"top"l<"EacEcrRadioRegion">f>rt<"bottom"p<"clear">>'
});
var btns = '<input type="radio" class="EacEcrSelection" name="EacEcrSelection" id="EacRadio" value="EAC" /> EAC '
+ '<input type="radio" class="EacEcrSelection" name="EacEcrSelection" id="EcrRadio" value="ECR" /> ECR '
+ '<input type="radio" class="EacEcrSelection" name="EacEcrSelection" id="BothRadio" value="Both" /> Both'
$(".EacEcrRadioRegion").html(btns);
$('#EacRadio').click(function() {tbl.fnFilter("EAC",0);});
$('#EcrRadio').click(function() {tbl.fnFilter("ECR",0);});
$('#BothRadio').click(function() {tbl.fnFilter("",0);});
});
这是一个 fiddle :http://jsfiddle.net/7KkpQ/3/
这是一个截图 http://imgur.com/1N6ABtP (在你问之前 - 是的,它发生在 IE、FF 和 Chrome 中)
最佳答案
这可能非常接近: http://jsfiddle.net/7KkpQ/9/
额外的 CSS 如下:
.EacEcrRadioRegion {
text-align: center;
float: left;
width: 50%;
}
#example_filter {
float: right;
}
关于javascript - 数据表标题中的格式问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18579420/