Question

我有这个django HTML模板，使用了datatables表：

{% extends "base.html" %}
{% load dictionary_extras %}
{% block title %}QA reports - {{report_title}}{% endblock %}

{% block content %}
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"/>

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>

<style type="text/css">
    tfoot {
    display: table-header-group;
    }
</style>

<h1>{{report_title}}<br>
    <small>(created on: {{report_creation_time}})</small>
</h1>

<table id='report_data' class="display" cellspacing="0" width="100%">
    <thead>
    <tr>
        {% for col_name in report_data_headers%}
        <th>{{col_name}}</th>
        {% endfor %}
    </tr>
    </thead>
    <tfoot>
    <tr>
        {% for col_name in report_data_headers%}
        <th>{{col_name}}</th>
        {% endfor %}
    </tr>
    </tfoot>
    <tbody>
    {% for data_row in report_data%}
    <tr>
        {% for item in data_row%}
        <td>{{item}}</td>
        {% endfor%}
    </tr>
    {% endfor %}
    </tbody>
</table>
<script>$(document).ready(function() {

        // Setup - add a text input to each footer cell
        $('#report_data tfoot th').each( function () {
            var title = $(this).text();
            $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
        } );

        // DataTable
        var table = $('#report_data').DataTable({
            "aLengthMenu": [[20, 50, 100, -1],
                            [20, 50, 100, "All"]],
            "buttons": ['csv']
        });

        // Apply the search
        table.columns().every( function () {
            var that = this;

            $( 'input', this.footer() ).on( 'keyup change', function () {
                if ( that.search() !== this.value ) {
                    that
                        .search( this.value )
                        .draw();
                }
            } );
        } );
    } );
</script>

{% endblock %}

我遵循此datatables tutorial

我的问题是我无法在页面上显示数据表csv按钮。我在"buttons": ['csv']行中要求此选项。尝试使用和不带引号的不同选项，没有运气 - 数据表显示为＆＃34;按钮＆＃34;代码中不存在该行。我的代码有语法问题吗？

Answer 1

你只是缺少一些脚本文件（特别是按钮扩展文件和JSZip文件（具体是csv / excel按钮所需）。我建议去{ {3}}，它允许您选择所需的扩展名，然后为您提供一个很好的下载包，以包含您需要的脚本文件。

我在下面快速生成了这个列表，其中只包含DataTables和csv按钮所需的脚本文件：

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css"/>

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.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.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>

我不建议只复制/粘贴此脚本（而是将其用作示例），而是转到DataTables download builder并确保您拥有所需的脚本（记住您必须将JSzip用于HTML5导出到csv

Csv按钮不会出现在数据表中

1 个答案: