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

编程问答 2022-06-11

问题描述

此刻，我的jQuery Datatable看起来像这样：

Picture

我想将“历史记录”标题和搜索栏放在同一行。

我已经实现了这样的标题和表格：

<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 }
                ],ordering: false,paging: true,lengthChange: false,language: {
                    searchPlaceholder: "Search names",search: ""
                }
            });

我已经看到可以通过添加DOM来进行某些更改，但是我不确定我需要什么。

感谢您的帮助！

解决方法

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

选项一

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

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

这会将f过滤器控件放置在其自己的div中，其样式类为filter，然后还将其包装在另一个div中，其样式类为title。

然后，我们需要HTML页面<head>中的以下样式部分：

.title::before {
  font-size: 2em;
  margin: 1.5em 0 0 0;
  content: "History";
}

.filter {
  float: right;
}

最后，要使用此方法，需要从页面中删除<h2>History</h2>元素。

我的最终结果是：

enter image description here

此方法有两个重要缺点：

  1. 它强迫您在CSS中放置一些内容（标题）-而样式和内容应该保持分开。

  2. 这可能会使实施国际化更加困难（如果需要）。

选项二

或者，您可以使用<h2>标签，并在其相对位置上使用-例如：

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

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

在这种情况下，您无需使用<dom>选项或第一个选项中的相关样式。

这也有一些重要的缺点：

  1. 它可能很脆弱-在某些情况下（例如，不同的屏幕分辨率）具有意外/不必要的行为。

  2. 您可能会在页面顶部留出多余的空白，这需要其他样式解决方法才能删除。

asp.net-mvcc#c#datatablesjavascriptjquery