在标题顶部移动div

Question

我正在使用datatables创建一个简单的网格，它附带一个搜索按钮，可用于过滤特定的搜索查询。目前，我通过点击搜索按钮进行搜索栏切换。我试图将搜索栏移动到标题上，如下图所示。这是JSFIDDLE

我尝试通过更改填充，位置但没有运气来搞乱其类ID

.ui-input-text.ui-body-inherit.ui-corner-all.ui-shadow-inset{

//Tried everything i could nothing worked here lol



}

请指教。如果这是一个糟糕的问题我也会道歉。

Answer 1

添加此样式：

#example_filter {
   margin: 9px 0 0 -118px;
   position: fixed;
   z-index: 9999999;
   left: 50%;
   top: 0;
}

Fiddle

Answer 2

我有一个更稳定/可移植的解决方案 - 只需在DOM中移动过滤器输入框：

将此添加到初始化中：

..
$('.dataTables_filter input').attr("placeholder", "enter seach terms here");
$('.dataTables_filter').css('float','none');    
$('.dataTables_filter').css('padding-right','0px');    
$("#example_filter").detach().prependTo('#header');    

以上内容会重置dataTables_filter的默认设置，因此可以在#header中居中。请记住在标题上添加id="header"广告，似乎您已经忘记了这一点。也可以更改搜索切换：

$('#search').click(function(e) {  
    $('#example_filter').toggle();    
    $('h1').toggle();
    if ($('#example_filter').is(':visible')) {
        $('.dataTables_filter').css("display", "inline-block");    
    } 
});

见分叉小提琴 - ＆gt;的 http://jsfiddle.net/ynKed/