具有Bootstrap下拉列表的DataTable固定列

我使用带有固定列扩展的DataTable和使用Bootstrap的样式。 我设置为固定的列包含Bootstrap的下拉元素。 问题是当我点击下拉元素时，我的固定列显示滚动条或有时overflow被隐藏为

下面是我的dataTable的初始化代码

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

这是JS Fiddle Link 。 有人有这方面的经验或我该如何解决这个问题？ 谢谢。

Answer 1

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

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

在这里查看工作演示

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(); }); } }); 

Answer 2

似乎没有办法使用纯CSS或bootstrap根据下拉宽度扩展列的宽度。 我认为你可以更广泛地设置一个固定宽度的列，如下所示：

  "columnDefs": [ { "width": "160px", "targets": 6 } ], 

你也可以通过添加类btn-block来使按钮与列一样宽：