数据表按钮扩展不起作用答案

【问题标题】：Datatables buttons extension not working数据表按钮扩展不起作用
【发布时间】：2017-08-31 11:27:25
【问题描述】：

我已经对此进行了一段时间的研究，但我无法弄清楚为什么这不起作用。它在某一时刻工作，但我的表格样式不正确，我丢失了一个数据表文件，之后它停止工作。我尝试删除和添加不同的 js 和 css 链接，尝试不同的顺序并尝试不同的方式对表格脚本本身进行编码。有任何想法吗？

这是我的 js/css

{% block stylesheets %}
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
            <link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
            <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css">

    {% endblock %}
    {% block javascripts %}

    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/vfs_fonts.js"></script>


    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/pdfmake.min.js"></script>

    <script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>

    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.colVis.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.flash.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.print.min.js"></script>
{% endblock %}

为了桌子

 <script>
            $(document).ready(function() {
                $('#myTable').DataTable({
                    ddom: 'Bfrtip',
                    buttons: [
                        'copyHtml5', 'excelHtml5', 'pdfHtml5', 'csvHtml5'
                    ]
                });
            });
        </script>

【问题讨论】：

你是否包含了按钮的 CSS 文件？
我可能在玩它们时删除了它，但我添加了它，但它仍然无法正常工作
我认为可能是按钮命名错误，作为测试，将print 作为其中之一。
我尝试了另一个只有new $.fn.dataTable.Buttons( table, { buttons: [ 'copy', 'excel', 'pdf',

标签： jquery datatables

【解决方案1】：

改变

<script>
        $(document).ready(function() {
            $('#myTable').DataTable({
                ddom: 'Bfrtip',
                buttons: [
                    'copyHtml5', 'excelHtml5', 'pdfHtml5', 'csvHtml5'
                ]
            });
        });
    </script>

到

<script>
        $(document).ready(function() {
            $('#myTable').DataTable({
                -------->dom: 'Bfrtip',
                buttons: [
                    'copyHtml5', 'excelHtml5', 'pdfHtml5', 'csvHtml5'
                ]
            });
        });
    </script>

你有一个多余的“d”把它去掉

【讨论】：

成功了，谢谢。最初我在单击刚刚打开的 PDF 时拥有它，现在它要求我保存它然后手动打开它。有没有办法让它直接打开？

【解决方案2】：

我之前遇到过这个问题，但我的解决方案是将按钮附加到我知道存在的表格之外的元素上。

myTable.buttons().container().appendTo($('#print'));

我的桌子是这样制作的......

myTable = $('table').DataTable({...

【讨论】：