帶Bootstrap下拉列表的DataTable固定列

我使用DataTable和Fixed Columns擴展以及使用Bootstrap樣式。我設置爲固定的列包含Bootstrap's dropdown元素。問題是，當我點擊下拉元素，我固定的列顯示滾動條或有時overflow被隱藏的帶Bootstrap下拉列表的DataTable固定列

下面是我的dataTable

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。有人有此經驗或我該如何解決這個問題？謝謝。

來源

2016-11-30 Cataclysm

您需要將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(); 
    }); 
    } 

});

來源

2016-11-30 09:47:38

謝謝主席先生！ ...似乎解決問題。一個小錯誤*無法點擊另一個下拉菜單仍然打開*。 – Cataclysm

@Cataclysm在codepen中正常工作。 –

耶！謝謝你，先生。我知道了。作爲代碼，事件將一次又一次嵌套。現在，我在文檔準備好之後爲'$（window）.on（'show.bs.dropdown''和'$（window）.on（'hide.bs.dropdown'）添加了事件處理函數，它可以很好地工作。非常感謝主席先生，以下是JS Fiddle中的最新更新代碼，您可以使用https://jsfiddle.net/jwyeuh8m/22/。祝您有美好的一天先生。 – Cataclysm

似乎沒有辦法使用純CSS或引導根據下拉寬度擴大列的寬度。我想，你可以把它更廣泛的只是設置一個固定的列寬這樣的：

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

你也可以通過添加btn-block類使按鈕一樣寬列是：

<button class="btn btn-primary dropdown-toggle btn-block"...

來源

2016-11-30 09:48:05 Banzay

我認爲這是不夠的只能擴大列的寬度。它不能解決這個問題，因爲最後一行仍然隱藏'overflow'。你可以看到更新的JSFiddle https：// jsfiddle.net/jwyeuh8m/18/ – Cataclysm

你可以製作最後一個單元格'dropup'。看看https://jsfiddle.net/banzay52/ka70x89u/ – Banzay

帶Bootstrap下拉列表的DataTable固定列

回答

相關問題