如何在jQuery的DataTables中获得y轴上的溢出？

wa7juj8i 于 2023-10-17 发布在 jQuery

关注(0)|答案(2)|浏览(184)

你好，我正在为我的项目使用DataTables for JQuery。但现在，我被困在如何使它有溢出的y轴与滚动。
这就是我现在所拥有的，在正常分辨率下似乎没问题。

这是我在调整table大小时得到的结果。这里存在DataTables表破坏其他元素的问题。

这是我的JS。

socket.on("sent_table_client", function (_received_data) {
  received_data_table_client = _received_data;
  $("#table_client_name").DataTable( {
      "paging"   : false,
      "searching": false,
      columns: [
          { data: "name"  , defaultContent: "None"},
          { data: "key_ir", defaultContent: "None"},
          { data: "dt"    , defaultContent: "None"}
      ],
      data: received_data_table_client
  });
});

在这里添加scrollY:"auto"也不起作用。
这是我的HTML。

<div style="flex:1;overfow-y:auto;"> <!-- `overfow-y:auto;` does not work. -->
  <table class="display" id="table_client_name" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>IR Key Code</th>
            <th>Latest Data Input</th>
        </tr>
    </thead>
  </table>
</div>

这个问题的解决方案是什么？

jquery

来源：https://stackoverflow.com/questions/43897547/how-can-i-get-overflow-on-y-axis-with-jquerys-datatables

2条答案

按热度按时间

ycggw6v21#

我之所以说这很容易，是因为我在以前的一个项目中解决了这个问题：p。在当时这并不容易。
https://jsfiddle.net/g6woh19L/4/
获取父元素的高度，减去数据表页眉/页脚的高度，并将scrollY设置为结果值。

function fillContainerHeight(api){
    var $scrollBody = $(api.table().body()).closest('div.dataTables_scrollBody');
    //reset height to calc new height, in case window was resized to be smaller
    $scrollBody.css({maxHeight:1,height:1})
    var container = $(api.table().container()).parent();
    var containerHeight = container.outerHeight(true);
    var headerHeight = $(api.table().header()).closest('div.dataTables_scrollHead').outerHeight(true);
    var footerHeight = $(api.table().footer()).closest('div.dataTables_scrollFoot').outerHeight(true);
    var scrollY = containerHeight - headerHeight - footerHeight;
    $scrollBody.css({maxHeight:scrollY,height:scrollY})
}

如果你愿意的话，你可以在调整窗口大小的时候调用这个函数。

赞(0）回复(0）举报 2023-10-17

mznpcxlj2#

在jQuery datatable中，我们可以在溢出的情况下使用以下代码进行水平和垂直滚动：$（selector）.DataTable（{ scrollX：真的，
scrollY：true，
}）

赞(0）回复(0）举报 2023-10-17