Csv按钮获胜't出现在数据表中
Csv button won't appear in datatables
我有这个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.
相关文章:
- 如何根据某些条件向可编辑的jquery数据表添加或删除按钮
- 基于单选按钮和复选框的数据表排序
- 允许在表刷新后键入数据表搜索按钮
- 如何强制更新Webix数据表中的单选按钮
- 通过命令按钮单击更改丰富面可扩展数据表高度
- 在数据表的新行中添加按钮,变得未定义
- 数据表移动行按钮
- PrimeFaces 命令按钮使用 jQuery 更新数据表内部
- 数据表删除按钮在其他页面上不起作用,除了第一个
- 在分页中显示数据表的第一个和最后一个按钮
- 从数据表中选择一行以显示单选按钮值
- 单击数据表中的按钮时执行操作
- 无法在按钮单击Ajax调用时初始化Jquery数据表
- 数据表:未捕获类型错误:无法读取未定义的属性“按钮”
- 如何在单击按钮时切换 jquery 数据表的分页
- YUI 2.8.2 数据表在客户端按钮单击操作完成后对旧值进行排序
- j查询数据表 导出按钮 动态文件名和标题
- 数据表行详细信息中的隐藏/显示按钮
- 数据表按钮启用/禁用示例不起作用
- 如何启用和禁用分页从jquery数据表按钮点击