jQuery Datatable：标题和搜索在同一行答案

【问题标题】：jQuery Datatable: Heading and Search on the same linejQuery Datatable：标题和搜索在同一行
【发布时间】：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 来改变一些东西，但我不太确定我需要什么。

感谢您的帮助！

【问题讨论】：

标签： javascript c# jquery asp.net-mvc datatables

【解决方案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> 选项或第一个选项中的相关样式。

这也有一些重要的缺点：

它可能很脆弱 - 在某些情况下会出现意外/不需要的行为（例如不同的屏幕分辨率）。
您可能在页面顶部有一个不需要的空白间隙，这需要额外的样式解决方法才能删除。

【讨论】：

感谢您的详细回答！它工作正常，虽然我理解你提到的那些缺点。