CSV 按钮不会出现在数据表中答案

【问题标题】：Csv button won't appear in datatablesCSV 按钮不会出现在数据表中
【发布时间】：2016-12-08 18:33:31
【问题描述】：

我有这个使用数据表的 django HTML 模板：

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

我的问题是我无法在页面上显示 datatables csv 按钮。我在"buttons": ['csv'] 行中要求此选项。尝试了带引号和不带引号的不同选项，但没有成功 - 数据表显示为好像代码中不存在“按钮”行。我的代码有语法问题吗？

【问题讨论】：

按钮不会出现我的魔法。您必须至少包含 Buttons 插件源代码并通过 dom 选项或按钮实例指示 dataTables 使用按钮。

标签： javascript jquery django datatables

【解决方案1】：

您只是缺少一些脚本文件（特别是按钮扩展文件和 JSZip 文件（这是 csv/excel 按钮特别需要的）。我建议转到 DataTables download builder，它将允许你选择你想要的扩展，然后会给你一个很好的下载包来包含你需要的脚本文件。

我在下面快速生成了这个列表，其中仅包含 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。

【讨论】：