jquery datatable导出excel扩展插件使用

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


没有更多推荐了,返回首页