数据表中的下拉列表 [英] Dropdown in dataTables

问题描述

首先，我尝试用

解决我的问题

但是我不想使用填充进行推送，而是在表格上方显示下拉菜单。

有什么想法？需要更多信息？

谢谢

解决方案

找到解决方案

插件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<< ;左下页边空白数据表分页>>'
}）; 
  

我希望这可以帮助一些使用dataTable的用户下拉。

祝你有美好的一天。

First of all, I tried to resolved my problem with

Bootstrap button drop-down inside responsive table not visible because of scroll

and

Bootstrap dropdown menu within a responsive table

but no way has functioned.

Issue : When I click on gear button I want that the dropdown appears above the dataTables and not IN the table.

Note that my table is a dataTables (https://datatables.net) initialized like that

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

Html code for my dropdown button

    <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>

The better result is from the first link (https://stackoverflow.com/a/34211851/5027172)

But I don't want to push with padding but rather showing the dropdown above the table.

Any ideas ? Needs more informations ?

Thanks

解决方案

After some hours I finally found the solution

The scrolling X of the plugin dataTables is responsible for this act !

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">>'
});

to

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

I hope that this can help some users of dataTables with dropdown.

Have a nice day.

这篇关于数据表中的下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！