Csv按钮获胜't出现在数据表中

Csv button won't appear in datatables

本文关键字:数据表 按钮 获胜 Csv      更新时间:2023-09-26

我有这个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 %}

我遵循这个数据表教程

我的问题是,我无法在页面上显示数据表csv按钮。我要求在"buttons": ['csv']行中提供此选项。尝试了带引号和不带引号的不同选项,但运气不好——数据表显示时就好像代码中没有"buttons"行一样。我的代码有语法问题吗?

您只是缺少一些脚本文件(特别是按钮扩展文件和JSZip文件(csv/excel按钮特别需要)。我建议你去DataTables下载生成器,它可以让你选择你想要的扩展,然后会给你一个很好的下载包,包括你需要的脚本文件。

我很快在下面生成了这个列表,其中只包含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下载生成器并确保您有所需的脚本(记住,您必须有用于HTML5导出到csv.

的JSzip