在标题顶部移动 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");    
    } 
});

见分叉小提琴 -> http://jsfiddle.net/ynKed/