使用版本(datatable 1.10.12)
1.官网例子:
https://datatables.net/extensions/buttons/examples/html5/excelTextBold.html
需要导入:F12查看源文件
在实现了datatable基础上导入如下文件:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css">
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
在原生成datatable的方法中加入标红部分:
$.collectList.namelistTable = $('#namelistTable').dataTable({
"aLengthMenu": [
[10, 15, 20, -1],
[10, 15, 20,30] // change per page values here
],
"iDisplayLength": 10,
"data":namelist,
"sPaginationType": "bootstrap",
"bLengthChange": true,//改变每页显示数据数量
"bAutoWidth": false,//启用或禁用自动列宽度的计算。
"bFilter" : true,
'sScrollX': true,
'scrollX': true,
"bDestroy" : true,
"bServerSide" : false,
"bSortClasses" : false,
"bSort" : false,
'dom': 'Bfrtip',
'buttons': [
'excel'
],
"oLanguage": {
"sProcessing": "正在加载中......",
"sLengthMenu": "每页显示: _MENU_",
"sZeroRecords": "对不起,查询不到相关数据!",
"sEmptyTable": "表中无数据存在!",
"sInfo": "当前显示 _START_ 到 _END_ 条,共 _TOTAL_ 条记录",
"sInfoFiltered": "数据表中共为 _MAX_ 条记录",
"sSearch": "搜索:",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上一页",
"sNext": "下一页",
"sLast": "末页"
}
},
"aoColumns": aoColumns
});
刷新页面就能出现excel按钮,点击即可下载table内容;
注意:
官网:File export
buttons 里面的值为:copy csv excel pdf