使用版本(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