javascript - dataTables.js 未正确调整大小。表格仍然溢出窗口

Question

我正在使用来自 https://datatables.net/ 的 dataTables.js我也在用他们的 responsive extension ，但我无法让表格正确响应地调整大小。任何见解都是伟大的。

表格溢出窗口。

如果您将它一直展开以便显示所有列，它甚至不会开始隐藏列，直到第 3 列离开屏幕

我创建了一个 jsfiddle用我的代码。

$(document).ready(function() {
  // Setup - add a text input to each footer cell
  $('#Table_Assets tfoot th').each(function() {
    var title = $('#Table_Assets thead th').eq($(this).index()).text();
    $(this).html('<input type="text" style="max-width:80px;" />');
  });

  // DataTable
  var table = $('#Table_Assets').DataTable({
    responsive: true,
    "autoWidth": false,
    "order": [
      [13, "desc"]
    ],
    initComplete: function() {
      var r = $('#Table_Assets tfoot tr');
      r.find('th').each(function() {
        $(this).css('padding', 8);
      });
      $('#Table_Assets thead').append(r);
      $('#search_0').css('text-align', 'center');
    },
  });

  $('#Table_Assets').resize()

  // Apply the search
  table.columns().every(function() {
    var that = this;

    $('input', this.footer()).on('keyup change', function() {
      that.search(this.value)
        .draw();
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.6/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js" type="text/javascript"></script>
<link href="https://cdn.datatables.net/responsive/1.0.6/css/dataTables.responsive.css" rel="stylesheet">
<script src="https://cdn.datatables.net/responsive/1.0.6/js/dataTables.responsive.js" type="text/javascript"></script>

<div style="max-width:100%; margin-left:auto; margin-right:auto; background-color:#c4bcbc; border-radius:15px; padding:10px; color:black" class="center">
  <table id="Table_Assets" class="outerroundedborder dt-responsive" style="width:auto; margin-bottom: 15px; margin-left:auto; margin-right:auto">
    <thead>
      <tr style="white-space:nowrap;">
        <th scope="col">Name:</th>
        <th scope="col">Type:</th>
        <th scope="col">Manufacturer</th>
        <th scope="col">Supplier</th>
        <th scope="col">Quantity</th>
        <th scope="col">Serial Number</th>
        <th scope="col">Location:</th>
        <th scope="col">Comments</th>
        <th scope="col">Computer Name</th>
        <th scope="col">Room Number</th>
        <th scope="col">Active</th>
        <th scope="col">Tech Fee</th>
        <th scope="col">Specifications</th>
        <th scope="col">Deploy Date</th>
        <th scope="col">User</th>
        <th scope="col">Department</th>
        <th scope="col">Building</th>
        <th scope="col">Tickets</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td style="width:auto;">Doom DOOM!</td>
        <td>Laptop</td>
        <td>HP</td>
        <td>none</td>
        <td>33</td>
        <td>sdfg</td>
        <td>sdfg</td>
        <td>dfhgdfh</td>
        <td>Nebulus</td>
        <td>2345</td>
        <td>True</td>
        <td>True</td>
        <td>Stuff from space</td>
        <td>5/30/2015</td>
        <td>Michaels | Joey</td>
        <td>Staff</td>
        <td></td>
        <td>
          <br />
          <div class="grey">No tickets found</div>
        </td>
      </tr>
      <tr>
        <td style="width:auto;">Dr. Von Doom</td>
        <td>Laptop</td>
        <td>HP</td>
        <td>none</td>
        <td>0</td>
        <td>123412341234</td>
        <td>Dr. Doom&#39;s Lair</td>
        <td></td>
        <td>Spiderman</td>
        <td>42</td>
        <td>True</td>
        <td></td>
        <td>Spidey sense is tingling. ^_^</td>
        <td>6/18/2015</td>
        <td>Michaels | Joey</td>
        <td>Staff</td>
        <td>AIC Faculty</td>
        <td>
          <br />
          <div class="grey">No tickets found</div>
        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr class="sortbottom">
        <th scope="col">Name:</th>
        <th scope="col">Type:</th>
        <th scope="col">Manufacturer</th>
        <th scope="col">Supplier</th>
        <th scope="col">Quantity</th>
        <th scope="col">Serial Number</th>
        <th scope="col">Location:</th>
        <th scope="col">Comments</th>
        <th scope="col">Computer Name</th>
        <th scope="col">Room Number</th>
        <th scope="col">Active</th>
        <th scope="col">Tech Fee</th>
        <th scope="col">Specifications</th>
        <th scope="col">Deploy Date</th>
        <th scope="col">User</th>
        <th scope="col">Department</th>
        <th scope="col">Building</th>
        <th scope="col">Tickets</th>
      </tr>
    </tfoot>
  </table>
</div>

Answer 1

我有同样的问题，我正在使用 jquery DataTables 1.10.7 和扩展 Responsive 1.0.6，我通过在 _resize 函数，关于第 560 行。

在函数末尾添加下一行:

$(dt.table().node()).removeAttr('样式');

这应该有效。

函数最像这样:

_resize: function() {
  var dt = this.s.dt;
  var width = $(window).width();
  var breakpoints = this.c.breakpoints;
  var breakpoint = breakpoints[0].name;
  var columns = this.s.columns;
  var i, ien;

  // Determine what breakpoint we are currently at
  for (i = breakpoints.length - 1; i >= 0; i--) {
    if (width <= breakpoints[i].width) {
      breakpoint = breakpoints[i].name;
      break;
    }
  }

  // Show the columns for that break point
  var columnsVis = this._columnsVisiblity(breakpoint);

  // Set the class before the column visibility is changed so event
  // listeners know what the state is. Need to determine if there are
  // any columns that are not visible but can be shown
  var collapsedClass = false;
  for (i = 0, ien = columns.length; i < ien; i++) {
    if (columnsVis[i] === false && !columns[i].never) {
      collapsedClass = true;
      break;
    }
  }

  $(dt.table().node()).toggleClass('collapsed', collapsedClass);

  dt.columns().eq(0).each(function(colIdx, i) {
    dt.column(colIdx).visible(columnsVis[i]);
  });

  $(dt.table().node()).removeAttr('style');
},

最好的问候。