DataTables响应多个固定标头-仅固定一个标头行

时间：2018-08-12 13:41:44

标签： javascript jquery twitter-bootstrap twitter-bootstrap-3 datatables

我有一个简单的表，可以与DataTables一起使用。我有多个固定的标头，这正在工作。唯一的例外是，当in使表具有响应性时...如果您只是删除多个标头，而只有一个固定的标头行，则可以正常工作。但是，如果您有多个固定标头，则不会。.只有固定标头行中的一个会响应，而另一行则不响应。

到目前为止，我一直遵循以下代码：https://datatables.net/extensions/fixedheader/examples/integration/responsive-bootstrap.html

您可以在下面测试我的代码！

但是，我认为DataTables和Bootstrap提供的响应式解决方案根本不是针对多个标头而设计的。是否有任何方法可以使它适用于多个标头，或者你们中的每个人还有其他解决方案吗？

致以问候，谢谢！

$(document).ready(function() {
  var table = $('#contact_overview_table').DataTable({
    "responsive": true,
    "pageLength": 100,
  });

  new $.fn.dataTable.FixedHeader(table);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/fixedheader/3.1.5/js/dataTables.fixedHeader.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/responsive.bootstrap.min.js"></script>

<link href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/fixedheader/3.1.5/css/fixedHeader.bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<table class="table table-striped table-bordered nowrap" style="width: 100%" id="contact_overview_table">
  <thead>
    <tr>
      <th class="text-center" id="autofocus_on_load">ID</th>
      <th class="text-center">Art</th>
      <th class="text-center">Anrede</th>
      <th class="text-center">Titel</th>
      <th class="text-center">Vorname</th>
      <th class="text-center">Name</th>
      <th class="text-center">Firma1</th>
      <th class="text-center">Straße</th>
      <th class="text-center">Ort</th>
      <th class="text-center">Mobil</th>
      <th class="text-center table-hide-select">Actions</th>
    </tr>
    <tr>
      <th class="text-center">ID</th>
      <th class="text-center">Art</th>
      <th class="text-center">Anrede</th>
      <th class="text-center">Titel</th>
      <th class="text-center">Vorname</th>
      <th class="text-center">Name</th>
      <th class="text-center">Firma1</th>
      <th class="text-center">Straße</th>
      <th class="text-center">Ort</th>
      <th class="text-center">Mobil</th>
      <th class="text-center">Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th class="text-center">ID</th>
      <th class="text-center">Art</th>
      <th class="text-center">Anrede</th>
      <th class="text-center">Titel</th>
      <th class="text-center">Vorname</th>
      <th class="text-center">Name</th>
      <th class="text-center">Firma1</th>
      <th class="text-center">Straße</th>
      <th class="text-center">Ort</th>
      <th class="text-center">Mobil</th>
      <th class="text-center">Actions</th>
    </tr>
    <tr>
      <th class="text-center">ID</th>
      <th class="text-center">Art</th>
      <th class="text-center">Anrede</th>
      <th class="text-center">Titel</th>
      <th class="text-center">Vorname</th>
      <th class="text-center">Name</th>
      <th class="text-center">Firma1</th>
      <th class="text-center">Straße</th>
      <th class="text-center">Ort</th>
      <th class="text-center">Mobil</th>
      <th class="text-center">Actions</th>
    </tr>
    <tr>
      <th class="text-center">ID</th>
      <th class="text-center">Art</th>
      <th class="text-center">Anrede</th>
      <th class="text-center">Titel</th>
      <th class="text-center">Vorname</th>
      <th class="text-center">Name</th>
      <th class="text-center">Firma1</th>
      <th class="text-center">Straße</th>
      <th class="text-center">Ort</th>
      <th class="text-center">Mobil</th>
      <th class="text-center">Actions</th>
    </tr>
    <tr>
      <th class="text-center">ID</th>
      <th class="text-center">Art</th>
      <th class="text-center">Anrede</th>
      <th class="text-center">Titel</th>
      <th class="text-center">Vorname</th>
      <th class="text-center">Name</th>
      <th class="text-center">Firma1</th>
      <th class="text-center">Straße</th>
      <th class="text-center">Ort</th>
      <th class="text-center">Mobil</th>
      <th class="text-center">Actions</th>
    </tr>
    <tr>
      <th class="text-center">ID</th>
      <th class="text-center">Art</th>
      <th class="text-center">Anrede</th>
      <th class="text-center">Titel</th>
      <th class="text-center">Vorname</th>
      <th class="text-center">Name</th>
      <th class="text-center">Firma1</th>
      <th class="text-center">Straße</th>
      <th class="text-center">Ort</th>
      <th class="text-center">Mobil</th>
      <th class="text-center">Actions</th>
    </tr>
    <tr>
      <th class="text-center">ID</th>
      <th class="text-center">Art</th>
      <th class="text-center">Anrede</th>
      <th class="text-center">Titel</th>
      <th class="text-center">Vorname</th>
      <th class="text-center">Name</th>
      <th class="text-center">Firma1</th>
      <th class="text-center">Straße</th>
      <th class="text-center">Ort</th>
      <th class="text-center">Mobil</th>
      <th class="text-center">Actions</th>
    </tr>
    <tr>
      <th class="text-center">ID</th>
      <th class="text-center">Art</th>
      <th class="text-center">Anrede</th>
      <th class="text-center">Titel</th>
      <th class="text-center">Vorname</th>
      <th class="text-center">Name</th>
      <th class="text-center">Firma1</th>
      <th class="text-center">Straße</th>
      <th class="text-center">Ort</th>
      <th class="text-center">Mobil</th>
      <th class="text-center">Actions</th>
    </tr>
    <tr>
      <th class="text-center">ID</th>
      <th class="text-center">Art</th>
      <th class="text-center">Anrede</th>
      <th class="text-center">Titel</th>
      <th class="text-center">Vorname</th>
      <th class="text-center">Name</th>
      <th class="text-center">Firma1</th>
      <th class="text-center">Straße</th>
      <th class="text-center">Ort</th>
      <th class="text-center">Mobil</th>
      <th class="text-center">Actions</th>
    </tr>
    <tr>
      <th class="text-center">ID</th>
      <th class="text-center">Art</th>
      <th class="text-center">Anrede</th>
      <th class="text-center">Titel</th>
      <th class="text-center">Vorname</th>
      <th class="text-center">Name</th>
      <th class="text-center">Firma1</th>
      <th class="text-center">Straße</th>
      <th class="text-center">Ort</th>
      <th class="text-center">Mobil</th>
      <th class="text-center">Actions</th>
    </tr>
    <tr>
      <th class="text-center">ID</th>
      <th class="text-center">Art</th>
      <th class="text-center">Anrede</th>
      <th class="text-center">Titel</th>
      <th class="text-center">Vorname</th>
      <th class="text-center">Name</th>
      <th class="text-center">Firma1</th>
      <th class="text-center">Straße</th>
      <th class="text-center">Ort</th>
      <th class="text-center">Mobil</th>
      <th class="text-center">Actions</th>
    </tr>
    <tr>
      <th class="text-center">ID</th>
      <th class="text-center">Art</th>
      <th class="text-center">Anrede</th>
      <th class="text-center">Titel</th>
      <th class="text-center">Vorname</th>
      <th class="text-center">Name</th>
      <th class="text-center">Firma1</th>
      <th class="text-center">Straße</th>
      <th class="text-center">Ort</th>
      <th class="text-center">Mobil</th>
      <th class="text-center">Actions</th>
    </tr>
    <tr>
      <th class="text-center">ID</th>
      <th class="text-center">Art</th>
      <th class="text-center">Anrede</th>
      <th class="text-center">Titel</th>
      <th class="text-center">Vorname</th>
      <th class="text-center">Name</th>
      <th class="text-center">Firma1</th>
      <th class="text-center">Straße</th>
      <th class="text-center">Ort</th>
      <th class="text-center">Mobil</th>
      <th class="text-center">Actions</th>
    </tr>
    <tr>
      <th class="text-center">ID</th>
      <th class="text-center">Art</th>
      <th class="text-center">Anrede</th>
      <th class="text-center">Titel</th>
      <th class="text-center">Vorname</th>
      <th class="text-center">Name</th>
      <th class="text-center">Firma1</th>
      <th class="text-center">Straße</th>
      <th class="text-center">Ort</th>
      <th class="text-center">Mobil</th>
      <th class="text-center">Actions</th>
    </tr>
    <tr>
      <th class="text-center">ID</th>
      <th class="text-center">Art</th>
      <th class="text-center">Anrede</th>
      <th class="text-center">Titel</th>
      <th class="text-center">Vorname</th>
      <th class="text-center">Name</th>
      <th class="text-center">Firma1</th>
      <th class="text-center">Straße</th>
      <th class="text-center">Ort</th>
      <th class="text-center">Mobil</th>
      <th class="text-center">Actions</th>
    </tr>
    <tr>
      <th class="text-center">ID</th>
      <th class="text-center">Art</th>
      <th class="text-center">Anrede</th>
      <th class="text-center">Titel</th>
      <th class="text-center">Vorname</th>
      <th class="text-center">Name</th>
      <th class="text-center">Firma1</th>
      <th class="text-center">Straße</th>
      <th class="text-center">Ort</th>
      <th class="text-center">Mobil</th>
      <th class="text-center">Actions</th>
    </tr>
    <tr>
      <th class="text-center">ID</th>
      <th class="text-center">Art</th>
      <th class="text-center">Anrede</th>
      <th class="text-center">Titel</th>
      <th class="text-center">Vorname</th>
      <th class="text-center">Name</th>
      <th class="text-center">Firma1</th>
      <th class="text-center">Straße</th>
      <th class="text-center">Ort</th>
      <th class="text-center">Mobil</th>
      <th class="text-center">Actions</th>
    </tr>
    <tr>
      <th class="text-center">ID</th>
      <th class="text-center">Art</th>
      <th class="text-center">Anrede</th>
      <th class="text-center">Titel</th>
      <th class="text-center">Vorname</th>
      <th class="text-center">Name</th>
      <th class="text-center">Firma1</th>
      <th class="text-center">Straße</th>
      <th class="text-center">Ort</th>
      <th class="text-center">Mobil</th>
      <th class="text-center">Actions</th>
    </tr>
    <tr>
      <th class="text-center">ID</th>
      <th class="text-center">Art</th>
      <th class="text-center">Anrede</th>
      <th class="text-center">Titel</th>
      <th class="text-center">Vorname</th>
      <th class="text-center">Name</th>
      <th class="text-center">Firma1</th>
      <th class="text-center">Straße</th>
      <th class="text-center">Ort</th>
      <th class="text-center">Mobil</th>
      <th class="text-center">Actions</th>
    </tr>
    <tr>
      <th class="text-center">ID</th>
      <th class="text-center">Art</th>
      <th class="text-center">Anrede</th>
      <th class="text-center">Titel</th>
      <th class="text-center">Vorname</th>
      <th class="text-center">Name</th>
      <th class="text-center">Firma1</th>
      <th class="text-center">Straße</th>
      <th class="text-center">Ort</th>
      <th class="text-center">Mobil</th>
      <th class="text-center">Actions</th>
    </tr>
    <tr>
      <th class="text-center">ID</th>
      <th class="text-center">Art</th>
      <th class="text-center">Anrede</th>
      <th class="text-center">Titel</th>
      <th class="text-center">Vorname</th>
      <th class="text-center">Name</th>
      <th class="text-center">Firma1</th>
      <th class="text-center">Straße</th>
      <th class="text-center">Ort</th>
      <th class="text-center">Mobil</th>
      <th class="text-center">Actions</th>
    </tr>
    <tr>
      <th class="text-center">ID</th>
      <th class="text-center">Art</th>
      <th class="text-center">Anrede</th>
      <th class="text-center">Titel</th>
      <th class="text-center">Vorname</th>
      <th class="text-center">Name</th>
      <th class="text-center">Firma1</th>
      <th class="text-center">Straße</th>
      <th class="text-center">Ort</th>
      <th class="text-center">Mobil</th>
      <th class="text-center">Actions</th>
    </tr>
    <tr>
      <th class="text-center">ID</th>
      <th class="text-center">Art</th>
      <th class="text-center">Anrede</th>
      <th class="text-center">Titel</th>
      <th class="text-center">Vorname</th>
      <th class="text-center">Name</th>
      <th class="text-center">Firma1</th>
      <th class="text-center">Straße</th>
      <th class="text-center">Ort</th>
      <th class="text-center">Mobil</th>
      <th class="text-center">Actions</th>
    </tr>
  </tbody>
</table>

0 个答案:

没有答案
相关问题
最新问题