jquery - 具有Bootstrap下拉菜单的DataTable固定列

我将DataTable与Fixed Columns扩展一起使用，并将样式与Bootstrap结合使用。我设置为固定的列包含Bootstrap's dropdown元素。
问题是当我单击下拉元素时，我的固定列显示滚动条，有时overflow被隐藏为



下面是初始化我的数据表的代码

var oTable = $('table').dataTable( {
bFilter : false,
ordering: false,
    sScrollX: "100%",
fixedColumns : {
    leftColumns : 0,
    rightColumns : 1
},
pagingType : "full_numbers",
"sDom" : '<"top">rt<"bottom"ifp><"clear">',
} );

这是JS Fiddle Link。有人对此有经验或我该如何解决？谢谢。

最佳答案

您需要将dropmenu附加到body和一些CSS上，以隐藏固定的列溢出。

您可以根据需要调整代码。

检查工作演示HERE

CSS：

.DTFC_RightBodyLiner {
  overflow: hidden!important;
}

JS：

$(document).ready(function() {
  var oTable = $('table').dataTable({
    bFilter: false,
    ordering: false,
    sScrollX: "100%",
    fixedColumns: {
      leftColumns: 0,
      rightColumns: 1
    },
    pagingType: "full_numbers",
    "sDom": '<"top">rt<"bottom"ifp><"clear">',
  });

  $('.btn').click(function() {
    dropmenuPostion();
  })

  function dropmenuPostion() {
    // hold onto the drop down menu
    var dropdownMenu;

    // and when you show it, move it to the body
    $(window).on('show.bs.dropdown', function(e) {

      // grab the menu
      dropdownMenu = $(e.target).find('.dropdown-menu');

      // detach it and append it to the body
      $('body').append(dropdownMenu.detach());

      // grab the new offset position
      var eOffset = $(e.target).offset();

      // make sure to place it where it would normally go (this could be improved)
      dropdownMenu.css({
        'display': 'block',
        'top': eOffset.top + $(e.target).outerHeight(),
        'left': eOffset.left - 50
      });
    });

    // and when you hide it, reattach the drop down, and hide it normally
    $(window).on('hide.bs.dropdown', function(e) {
      $(e.target).append(dropdownMenu.detach());
      dropdownMenu.hide();
    });
  }

});

关于jquery - 具有Bootstrap下拉菜单的DataTable固定列，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40882626/