jQuery Datatable：标题和搜索在同一行
Posted
技术标签:
【中文标题】jQuery Datatable：标题和搜索在同一行【英文标题】：jQuery Datatable: Heading and Search on the same line 【发布时间】：2021-01-13 18:28:45 【问题描述】：目前我的 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 来改变一些东西，但我不太确定我需要什么。
感谢您的帮助！
【问题讨论】：
【参考方案1】：这里有两个选项 - 都不太理想：
选项一
使用您提到的dom 选项的一种方法是：
$('#example').DataTable(
dom: '<"title"<"filter"f>>rtip'
);
这会将f 过滤器控件放置在其自己的具有filter 样式类的div 中，然后还将其包装在另一个具有title 样式类的div 中。
那么我们需要在 html 页面的<head> 中添加如下样式部分：
.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> 选项或第一个选项中的相关样式。
这也有一些重要的缺点：
它可能很脆弱 - 在某些情况下会出现意外/不需要的行为（例如不同的屏幕分辨率）。
您可能在页面顶部有一个不需要的空白间隙，这需要额外的样式解决方法才能删除。
【讨论】：
感谢您的详细回答！它工作正常，虽然我理解你提到的那些缺点。以上是关于jQuery Datatable：标题和搜索在同一行的主要内容，如果未能解决你的问题，请参考以下文章