jquery - 使用 DT::datatable 为用户调整列大小

Question

我正在创建一个带有一些 DT::datatables 的 R flexdashboard 文档。我希望仪表板的用户能够动态调整表列的大小。似乎这是一个应该在非常广泛的数据表包中可用的功能，但我在 https://rstudio.github.io/DT/ 的 R DT 文档中都找不到任何对它的引用。或 JQuery 文档 https://datatables.net .任何人都可以提供有关如何完成此操作或在哪里查看的建议吗？

Answer 1

有一些关于可调整大小的列数据表的帖子。例如:

Resizing columns using JQuery UI提供 working example .

有人为它创建了一个插件 here (我认为它并不能很好地工作)。

但我更喜欢使用 resizable像这样的 jquery-ui post .工作示例:

$(function() {
  $(".data").DataTable({
    'ordering': false,
    'dom': 'Blfrtip',
    'autoWidth': false,
  });
  $('table th').resizable({
    handles: 'e',
    stop: function(e, ui) {
      $(this).width(ui.size.width);
    }
  });

});

td, th {
  border: 1px solid #ccc;
}

<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

<table style="width: 100%" class="data">
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
    </tr>
  </tbody>
</table>