目前我的 jQuery 数据表如下所示:
我希望历史标题和搜索栏位于同一行。
我已经实现了标题和表格,如下所示:
<h2>History</h2>
<table class="table" id="history_tbl" style="width:100%">
<thead>
<tr>
...
</tr>
</thead>
<tbody>
@for (var i = 1; i < M.Count(); i++)
{
<tr>
...
</tr>
}
</tbody>
</table>
数据表的规范如下:
$("#history_tbl").DataTable({
"columns": [
{ searchable: false },
null,
{ searchable: false },
{ searchable: false },
{ searchable: false },
{ searchable: false },
{ searchable: false }
],
ordering: false,
paging: true,
lengthChange: false,
language: {
searchPlaceholder: "Search names",
search: ""
}
});
我已经看到我可以通过添加 DOM 来更改某些内容,但我不太确定我的情况需要什么。
我很感激任何帮助!
这里有两个选项 - 两个都不太理想:
选项一
一种方法是使用dom https://datatables.net/reference/option/dom您提到的选项是这样的:
$('#example').DataTable( {
dom: '<"title"<"filter"f>>rtip'
} );
这使得f
过滤器控件位于其自己的 div 中,样式类为filter
,然后将其包装在另一个 div 中,其样式类为title
.
然后我们需要在下面的样式部分<head>
HTML 页面的:
.title::before {
font-size: 2em;
margin: 1.5em 0 0 0;
content: "History";
}
.filter {
float: right;
}
最后,<h2>History</h2>
要使用此方法,需要从页面中删除元素。
我的最终结果是这样的:
这种方法有几个重要的缺点:
-
它迫使你在 CSS 中放置一些内容(标题)——而样式和内容应该保持分开。
-
这可能会使实施国际化变得更加困难(如果需要的话)。
选项二
或者,您可以使用<h2>
标签,具有一些相对定位 - 例如:
<div style="position: relative; top: 30px;"><h2>History</h2></div>
这会将标题从顶部向下推 30 像素(您可能需要根据您的具体需求进行调整)。
在这种情况下,您不需要使用<dom>
选项,或第一个选项的相关样式。
这也有一些重要的缺点:
-
它可能很脆弱 - 在某些情况下(例如不同的屏幕分辨率)会出现意外/不需要的行为。
-
您可能在页面顶部有不需要的空白间隙,这需要额外的样式解决方法来删除。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)