数据表标题不响应模式

时间：2019-07-18 06:21:11

标签： javascript datatables

我正在尝试在模式中使用datatable，但是当我启动模式时，标头没有响应。但是，如果表不在模式中，则它是响应式的。

请参见下面的代码

$(document).ready(function() {

  var table = $('#testtable').DataTable({
    info: true, // TO DISPLAY THE INFO 'SHOWING 1 TO X OF Y ENTRIES'
    lengthMenu: [
      [5, 10, 25, 50, -1],
      [5, 10, 25, 50, "All"]
    ],
    pageLength: 10,
    pagingType: 'full_numbers',
    language: {
      emptyTable: "No Data Found"
    },
    dom: 'tip',
    paging: true,
    responsive: true,
    scrollCollapse: true,
    scrollY: '50vh',
    columnDefs: [{
      targets: 'no-sort',
      orderable: false
    }]
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.18/af-2.3.2/b-1.5.4/b-colvis-1.5.4/b-flash-1.5.4/b-html5-1.5.4/b-print-1.5.4/datatables.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.18/af-2.3.2/b-1.5.4/b-colvis-1.5.4/b-flash-1.5.4/b-html5-1.5.4/b-print-1.5.4/datatables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.dataTables.min.css">
<div class="modal fade" id="testmodal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Test Modal</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        <table class="table table-responsive-xl responsive table-bordered table-dark" id="testtable">
          <thead>
            <th>Test Column</th>
            <th>Test Column</th>
            <th>Test Column</th>
          </thead>
          <tbody id="testtable_tbody" class="text-dark">
            <tr>
              <td> TEST DATA </td>
              <td> TEST DATA </td>
              <td> TEST DATA </td>
            </tr>
          </tbody>
        </table>

      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
      </div>

    </div>

  </div>
</div>
<button data-toggle="modal" data-target="#testmodal">Launch Modal</button>

2 个答案:

答案 0 :(得分：1)

尝试在模式shown之后手动触发resize事件

注意：

  1. table-responsive类适用于div
  2. 万一看起来很生涩，请尝试向模态中添加/删除visibility类

$(document).ready(function() {

  var table = $('#testtable').DataTable({
    info: true, // TO DISPLAY THE INFO 'SHOWING 1 TO X OF Y ENTRIES'
    lengthMenu: [
      [5, 10, 25, 50, -1],
      [5, 10, 25, 50, "All"]
    ],
    pageLength: 10,
    pagingType: 'full_numbers',
    language: {
      emptyTable: "No Data Found"
    },
    dom: 'tip',
    paging: true,
    responsive: true,
    scrollCollapse: true,
    scrollY: '50vh',
    columnDefs: [{
      targets: 'no-sort',
      orderable: false
    }]
  });

});

$('#testmodal').on('shown.bs.modal', function() {
  $(this).trigger('resize')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.18/af-2.3.2/b-1.5.4/b-colvis-1.5.4/b-flash-1.5.4/b-html5-1.5.4/b-print-1.5.4/datatables.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.18/af-2.3.2/b-1.5.4/b-colvis-1.5.4/b-flash-1.5.4/b-html5-1.5.4/b-print-1.5.4/datatables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.dataTables.min.css">
<div class="modal fade" id="testmodal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Test Modal</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        <div class="table-responsive-xl responsive">
          <table class="table table-bordered table-dark" id="testtable">
            <thead>
              <th>Test Column</th>
              <th>Test Column</th>
              <th>Test Column</th>
            </thead>
            <tbody id="testtable_tbody" class="text-dark">
              <tr>
                <td> TEST DATA </td>
                <td> TEST DATA </td>
                <td> TEST DATA </td>
              </tr>
            </tbody>
          </table>
        </div>

      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
      </div>

    </div>

  </div>
</div>
<button data-toggle="modal" data-target="#testmodal">Launch Modal</button>

答案 1 :(得分：1)

请参见responsive.recalc() DataTables API方法，该方法应在模态显示后调用，以重新计算显示更改后响应式扩展使用的宽度。

也来自官方文档：

  

值得注意的是，该方法在许多方面类似于columns.adjust()，您可能希望将两者一起使用... 

$('#testmodal').on('shown.bs.modal', function() {
   $('#testtable').DataTable()
      .columns.adjust()
      .responsive.recalc();
});
相关问题
最新问题