将div移动到页头之上

Question

我正在使用 datatables 制作一个简单的表格，并使用自带的搜索按钮来筛选特定搜索查询。目前，我通过点击搜索按钮来切换搜索栏。现在我想将搜索栏移到标题上面，如下图所示。这是JSFIDDLE。

我尝试更改class和id以调整填充和位置，但没有成功。

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

//Tried everything i could nothing worked here lol



}

请给予建议。如果问题不好请见谅。

- user1010101

---

使用样式设置 margin-top:20px!important;。 - Pratik Joshi

使用 vertical-align ="top"。这样做就可以了。 - Human Being

你需要在页眉中创建可编辑的div，并将其值附加到隐藏输入中。 - Kodr.F

Answer 1

添加以下样式：

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

Fiddle

- Jai

---

哇，太棒了！这节省了我很多时间。 - user1010101

Jai，我遇到了一点问题，就是你建议的更改。你说要保持“position:fixed”，但是当我保持固定位置时，我的面板无法工作，但是当我更改为“position:absolute”时，我的面板可以正常工作，但是CSS又乱了，因为搜索栏在底部而不是顶部。你能提供一个不需要固定位置的解决方案吗？ - user1010101

查看此答案-> https://dev59.com/WHbZa4cB1Zd3GeqPGoNm - 这可能与堆叠有关。有太多的类和元素，其设置或计算位置为fixed / absolute嵌套在彼此中，以使dataTables_filter保持在它们所有元素的顶部。虽然之前看起来很好。 - davidkonrad

尝试了一小时，仍然无法调整我的代码使其正常工作，不确定该怎么办。 - user1010101

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/

- davidkonrad

---

我尝试了你的解决方案，虽然在 Fiddle 上可以工作，但在我的实际代码中却不行。如果您想看的话，我可以展示我的代码。我的头文件完全空白。 - user1010101

我实际上在“接受答案”的评论下遇到了一个小问题，你能否帮忙看一下？我也会给你点赞的。 - user1010101

非常感谢，我应该把这当做一个独立的问题来询问你并支付报酬的。我只是想知道，在表头中的箭头上是否可以更改箭头颜色？ - user1010101

@user2733436，它们是作为“background-image”附加的图像，但您可以制作自己的图像并替换它们 - 可以在图像处理程序中轻松地重新着色。 - davidkonrad

嘿，我刚刚发布了一个新问题，之前在使用dataTables时你帮助过我解决问题，所以如果你能看一下我的新问题，我会非常感激。再次感谢。http://stackoverflow.com/questions/22842504/datatables-updating-only-rows-without-reloading-table - user1010101