Question

我已经研究了一段时间，但我无法弄清楚为什么这不起作用。它在某一点工作，但我的表格没有正确的样式，我错过了一个datatables文件，之后它停止工作。我尝试删除并添加不同的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>

Answer 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”只是删除它

Answer 2

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

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

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

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

数据表按钮扩展无法正常工作

2 个答案: