可滚动的DataTables表

Question

我试图在DataTables上关注this example以获得可滚动，可搜索的固定高度表。到目前为止，这是我的代码片段：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

到目前为止，我写的代码有两个问题。首先，<thead>似乎是从表格的主体中分离出来的，我希望它们能够保持在一起。

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

Answer 1

您忘记添加CSS for datatables bootstrap dataTables.bootstrap.css，例如可以在CDN page数据广告中找到。包括这个解决了标题的问题。

要将样式应用于过滤器/搜索框，您应该将其包装在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>