Javascript jQuery Datatable：标题和搜索在同一行上

目前，我的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>

我希望历史标题和搜索栏在同一行

我实现了如下标题和表格：

<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>

我已经看到，我可以通过添加DOM来改变一些东西，但我不太确定我的案例需要什么

---

谢谢你的帮助

这里有两个选项-这两个选项都不太理想：

选项一

使用您提到的选项的一种方法是：

$('#example').DataTable( {
  dom: '<"title"<"filter"f>>rtip'
} );

最后，要使用这种方法，需要从页面中删除

History

元素

我的最终结果是：

这种方法有两个重要的缺点：

它迫使你在CSS中放置一些内容（标题），而样式和内容应该是分开的

这可能会使实施国际化变得更加困难（如果需要的话）

选项二

或者，您可以使用带有一些相对定位的

标记，例如：

<div style="position: relative; top: 30px;"><h2>History</h2></div>

历史

这会将标题从顶部向下推30像素（您可能需要根据自己的具体需要进行调整）

在这种情况下，您不需要使用

选项或第一个选项中的相关样式

这也有一些重要的缺点：

它可能很脆弱-在某些情况下（例如不同的屏幕分辨率）会出现意外/不必要的行为

页面顶部可能存在不必要的空白，这需要进行额外的样式调整才能消除

---

谢谢你的详细回答！虽然我理解你提到的那些缺点，但它工作得很好。

<div style="position: relative; top: 30px;"><h2>History</h2></div>