数据表中的下拉菜单

Question

首先，我尝试解决我的问题

由于滚动，响应表内的引导按钮下拉列表不可见

和

响应式表格中的 Bootstrap 下拉菜单

但没有任何方法起作用。

问题：当我单击齿轮按钮时，我希望下拉列表显示在数据表上方而不是表中。

请注意，我的表是一个像这样初始化的dataTables ( https://datatables.net )

$('#table_fours_send').DataTable({
    responsive: true,
    scrollX: true,
    sScrollX: '100%',
    paging: false,
    dom: 't<"margin-dataTable-bottom"<"pull-left margin-dataTable-pagination">>'
});

我的下拉按钮的 HTML 代码

    <div class="form-group col-sm-2 no-padding-left no-padding-right">
        <div class="dropdown inline-block">
            <i class="fa fa-cog fa-lg padding-gear pointer dropdown-toggle" id="dropdownSend" 
               data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"></i>
            <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownSend">
                <li><a href="#" data-toggle="modal" data-target="#m_add_contact">{{'label.add_contact'|trans()}}</a></li>
                <li><a href="#" data-toggle="modal" data-target="#m_add_update_contact">{{'label.update_contact'|trans()}}</a></li>
            </ul>
        </div>            
    </div>

更好的结果来自第一个链接（/sf/answers/2394829601/）

但我不想用填充来推动，而是在表格上方显示下拉列表。

有任何想法吗 ？需要更多信息吗？

谢谢

Answer 1

几个小时后我终于找到了解决方案

插件 dataTables 的滚动 X 负责此行为！

t_fournisseurs_send = $('#table_fours_send').DataTable({
    responsive: true,
    scrollX: true,
    sScrollX: '100%',
    paging: false,
    dom: 't<"margin-dataTable-bottom"<"pull-left margin-dataTable-pagination">>'
});

到

t_fournisseurs_send = $('#table_fours_send').DataTable({
    responsive: true,
    paging: false,
    dom: 't<"margin-dataTable-bottom"<"pull-left margin-dataTable-pagination">>'
});

我希望这可以帮助一些使用下拉菜单的数据表用户。

祝你今天过得愉快。