javascript - 数据表和 sScrollY、自动调整大小

Question

这个插件真的很挣扎。

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

$(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;" width="100%" 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

我尝试了什么

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

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

那么，

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

还有其他解决方案吗

Answer 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;" width="100%" 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>