数据表和 sScrollY，自动调整大小

Posted 2023-05-07

【中文标题】数据表和 sScrollY，自动调整大小

【英文标题】：datatable and sScrollY, autoresize

【发布时间】：2015-10-19 21:33:05

【问题描述】：

这个插件真的很辛苦。

我有可折叠的左侧导航栏，右侧有简单的数据表，当我折叠左侧导航时，表格标题在天堂跳舞（它们不会自行调整大小）

$(document).ready(function() 
  $("#myTable").dataTable(
    "sScrollY": "150px",
     "paging": false,
     "autoWidth": false,
     "ordering": false,
     "bAutoWidth": false,
     "info": false,
     "searching": false        
  );
);

$(document).on('click', '.left', function() 
  $(this).hide();
  $(".right").width('100%');
);

.wrapper 
  width: 100%;
  margin: 0;
  padding: 0;

.left 
  width: 30%;
  float: left;

.right 
  width: 70%;
  float: left;

div 
  display: inline-block;

<script src="http://datatables.net/download/build/nightly/jquery.dataTables.js"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="left">I am left</div>
  <div class="right">
    <table border="1" style="border-collapse: collapse;"  id='myTable'>
      <thead>
        <tr>
          <th>Status</th>
          <th>Count</th>
          <th>Download</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Open</td>
          <td>10</td>
          <td>Download</td>
        </tr>
        <tr>
          <td>Closed</td>
          <td>20</td>
          <td>Download</td>
        </tr>
        <tr>
          <td>Active</td>
          <td>20</td>
          <td>Download</td>
        </tr>
        <tr>
          <td>Open</td>
          <td>5</td>
          <td>Download</td>
        </tr>
        <tr>
          <td>Closed</td>
          <td>5</td>
          <td>Download</td>
        </tr>
        <tr>
          <td>Inactive</td>
          <td>5</td>
          <td>Download</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Fiddle speaks more than world

我尝试了什么

http://datatables.net/forums/discussion/2343/misaligned-column-headings-using-sscrollx-sscrolly

http://datatables.net/forums/discussion/8361/table-column-do-not-resize-with-sscrolly

那么，

我还有一种重绘表格的解决方案。但我个人认为这样做是一个非常糟糕的主意。

请提供其他解决方案

【参考方案1】：

请找Fiddle

希望有效。

$(document).ready(function () 
    var otable = $("#myTable").dataTable(
        "sScrollY": "150px",
            "paging": false,
            "autoWidth": false,
            "ordering": false,
            "bAutoWidth": false,
            "info": false,
            "searching": false,
            "bAutoWidth": false // Disable the auto width calculation 
    );

    $(document).on('click', '.left', function () 
        $(this).hide();
        $(".right").width('100%');
        otable.fnAdjustColumnSizing();
    );

);

.wrapper 
  width: 100%;
  margin: 0;
  padding: 0;

.left 
  width: 30%;
  float: left;

.right 
  width: 70%;
  float: left;

div 
  display: inline-block;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://datatables.net/download/build/nightly/jquery.dataTables.js"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css" rel="stylesheet" />
<div class="wrapper">
  <div class="left">I am left</div>
  <div class="right">
    <table border="1" style="border-collapse: collapse;"  id='myTable'>
      <thead>
        <tr>
          <th>Status</th>
          <th>Count</th>
          <th>Download</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Open</td>
          <td>10</td>
          <td>Download</td>
        </tr>
        <tr>
          <td>Closed</td>
          <td>20</td>
          <td>Download</td>
        </tr>
        <tr>
          <td>Active</td>
          <td>20</td>
          <td>Download</td>
        </tr>
        <tr>
          <td>Open</td>
          <td>5</td>
          <td>Download</td>
        </tr>
        <tr>
          <td>Closed</td>
          <td>5</td>
          <td>Download</td>
        </tr>
        <tr>
          <td>Inactive</td>
          <td>5</td>
          <td>Download</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>