水平滚动时 DataTables Fixed Column 上的 Popover 看起来很奇怪

Posted 2023-05-08

【中文标题】水平滚动时 DataTables Fixed Column 上的 Popover 看起来很奇怪

【英文标题】：Popover on DataTables Fixed Column looks strange when horizontally scrolling

【发布时间】：2020-06-24 00:31:06

【问题描述】：

我有一个问题，我试图将弹出框放在已修复的表的第一列上。在您开始水平滚动之前，弹出框看起来很好（参见下面的测试用例）。一旦你开始滚动，弹出框开始出现在表格的左边缘，看起来很奇怪。任何帮助将不胜感激。

我尝试了多种解决方案，包括使用 fixedColumns().relayout() 和 .popover('update) 在滚动时刷新固定列和弹出框的位置，但它没有按照预期的方式工作：

  $( table.table().container ).on('scroll', function() 
       setTimeout(function()  $.fn.dataTable
      .tables(  visible: true, api: true  )
      .columns.adjust()
      .fixedColumns().relayout();
      $('.pop').popover('update'); 
      ,300)
  );

使用 Bootstrap 4 和 Popper.js。

测试用例：http://live.datatables.net/zudapubo/1

更新 1 - 为喜欢它的人添加 JS Fiddle：https://jsfiddle.net/t8w57qj9/

谢谢

【参考方案1】：

对于遇到类似问题的任何人，请使用 tippy.js 从 popper.js v1 切换到 popper.js v2。确保在使用 DataTables FixedColumn 时将您的小费实例附加到 div.DFTC_LeftWrapper。