【问题标题】:Show entries dropdown disappear when using export tools使用导出工具时显示条目下拉列表消失
【发布时间】:2015-12-14 07:12:28
【问题描述】:

使用导出工具时显示条目下拉菜单消失

$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip', // if you remove this line you will see the show entries dropdown
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]
    } );
});

jsfiddle

【问题讨论】:

    标签: javascript jquery datatables


    【解决方案1】:

    您只是缺少dom 中的l 标志。 l 用于“长度更改输入控制”。

    dom: 'lBfrtip'
    

    将使下拉菜单重新出现。

    更新小提琴 -> http://jsfiddle.net/p33x5L3t/1/
    dom 文档 -> https://datatables.net/reference/option/dom

    【讨论】:

    • 谢谢,这很有帮助!一个问题 - 使用您的修复时,按钮确实会重新出现,但它们非常接近“显示条目下拉列表”......在“条目”一词的末尾和第一个导出按钮(复制)?
    • 我是否需要编辑数据表按钮 CSS 文件? (我对这些东西还很陌生,如果我的问题很愚蠢,请见谅)
    • @ZubinMukerjee,这取决于您使用的样式类型。即默认内置,引导程序,基础等。您可以将间距添加到按钮容器.dt-buttons { margin-left: 50px; } jsfiddle.net/2nwqa2jk/2 或将按钮包装到样式容器中,如dom: 'l<".margin" B>frtip' jsfiddle.net/2nwqa2jk/3
    • @ZubinMukerjee,我认为这听起来太费劲了 :) 你真的会后悔你想要更新的那一天。如果需要,您可以简单地覆盖 CSS 声明,只需在 CSS 导入后声明它们。使用浏览器检查器确定您需要定位哪些声明。请参阅上面的小提琴,第一个是覆盖 CSS 声明。
    • 好的,我将您的第一个小提琴链接中的 CSS 代码包含在 html 文件的样式标记中,并且效果很好!再次感谢你:)
    【解决方案2】:

    我知道它太长了,但如果有人仍然面临这个问题,那么请执行以下操作,这是一个替代答案。

    在按钮内添加'pageLength'如下:

    $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'pageLength','copy', 'csv', 'excel', 'print'
        ]
    } );
    

    【讨论】:

      【解决方案3】:

      这对我有用:

      $(document).ready(function(){   
            dataTable = $('#myDataTable').DataTable({
               "processing":true,
               "serverSide":true,
                dom:'lBfrtip',
                buttons: ['excel', 'csv', 'pdf', 'copy'],
               "lengthMenu": [50,100,500,1000,2000,5000,10000,50000,100000],
               "order":[],
               "sScrollX": "100%",
               "scrollCollapse": true,
               "ajax":{
                  url:"FetchAllAjax.php",
                  type:"POST"
               }
            });       
         });
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2016-10-22
        • 1970-01-01
        • 1970-01-01
        • 2019-12-02
        • 1970-01-01
        • 1970-01-01
        • 2010-10-15
        相关资源
        最近更新 更多