javascript - 可滚动的 DataTables 表格

Question

我正在尝试关注 this example在 DataTables 上获取可滚动、可搜索的固定高度表。到目前为止，这是我的代码片段:

$(document).ready(function() {
  $('#dataTables_paginate').DataTable({
    filter: true,
    info: false,
    scrollY: '25vh',
    scrollCollapse: true,
    paging: false,
    language: {
      search: "_INPUT_",
      searchPlaceholder: "Search..."
    }
  });
});

.dataTables_filter {
    float: left;
    text-align: left;
    padding: 0px;
    margin: 0px;
}

<script src="https://cdn.datatables.net/v/bs/jq-3.2.1/dt-1.10.16/datatables.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="col-lg-4">
    <table class="table table-striped table-bordered" id="dataTables_paginate">
      <thead>
        <tr>
          <th>Name</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Steve Jason Smith</td>
        </tr>
        <tr>
          <td>Steve Jason Smith</td>
        </tr>
        <tr>
          <td>Steve Jason Smith</td>
        </tr>
        <tr>
          <td>Steve Jason Smith</td>
        </tr>
        <tr>
          <td>Steve Jason Smith</td>
        </tr>
        <tr>
          <td>Steve Jason Smith</td>
        </tr>
        <tr>
          <td>Steve Jason Smith</td>
        </tr>
        <tr>
          <td>Steve Jason Smith</td>
        </tr>
        <tr>
          <td>Steve Jason Smith</td>
        </tr>
        <tr>
          <td>Steve Jason Smith</td>
        </tr>
        <tr>
          <td>Steve Jason Smith</td>
        </tr>
        <tr>
          <td>Steve Jason Smith</td>
        </tr>
        <tr>
          <td>Steve Jason Smith</td>
        </tr>
        <tr>
          <td>Steve Jason Smith</td>
        </tr>
        <tr>
          <td>Steve Jason Smith</td>
        </tr>
        <tr>
          <td>Steve Jason Smith</td>
        </tr>
        <tr>
          <td>Steve Jason Smith</td>
        </tr>
        <tr>
          <td>Steve Jason Smith</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

到目前为止，我编写的代码有两个问题。首先，<thead>似乎与 table 的主体分离，但我希望它们都在一起。

其次，我试图将 DataTable 的搜索框左对齐，但无论我使用什么代码，我都无法让它移动。有什么方法可以让搜索框左对齐并使其与表格的宽度相同？

Answer 1

您忘记添加 CSS for datatables bootstrap dataTables.bootstrap.css 可以在 CDN page 上找到例如数据表。包括这个可以解决 header 的问题。

要将样式应用于过滤器/搜索框，您应该将其包装在一个 div 中，这可以通过 dom option 来完成数据表，请查看下面的代码片段作为示例。

$(document).ready(function() {
  $('#dataTables_paginate').DataTable({
    filter: true,
    info: false,
    scrollY: '25vh',
    scrollCollapse: true,
    paging: false,
    dom: '<"wrapper"f>lrtip',
    language: {
      search: "_INPUT_",
      searchPlaceholder: "Search..."
    }
  });
});

.wrapper {
    float: left;
    text-align: left;
    padding: 0px;
    margin: 0px;
}

.wrapper input {
  margin-left: 0 !important;
  font-size: 20px;
}

<script src="https://cdn.datatables.net/v/bs/jq-3.2.1/dt-1.10.16/datatables.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<link href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <div class="col-lg-4">
    <table class="table table-striped table-bordered" id="dataTables_paginate">
      <thead>
        <tr>
          <th>Name</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Steve Jason Smith</td>
        </tr>
        <tr>
          <td>Steve Jason Smith</td>
        </tr>
        <tr>
          <td>Steve Jason Smith</td>
        </tr>
        <tr>
          <td>Steve Jason Smith</td>
        </tr>
        <tr>
          <td>Steve Jason Smith</td>
        </tr>
        <tr>
          <td>Steve Jason Smith</td>
        </tr>
        <tr>
          <td>Steve Jason Smith</td>
        </tr>
        <tr>
          <td>Steve Jason Smith</td>
        </tr>
        <tr>
          <td>Steve Jason Smith</td>
        </tr>
        <tr>
          <td>Steve Jason Smith</td>
        </tr>
        <tr>
          <td>Steve Jason Smith</td>
        </tr>
        <tr>
          <td>Steve Jason Smith</td>
        </tr>
        <tr>
          <td>Steve Jason Smith</td>
        </tr>
        <tr>
          <td>Steve Jason Smith</td>
        </tr>
        <tr>
          <td>Steve Jason Smith</td>
        </tr>
        <tr>
          <td>Steve Jason Smith</td>
        </tr>
        <tr>
          <td>Steve Jason Smith</td>
        </tr>
        <tr>
          <td>Steve Jason Smith</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>