管理で使用するエース表ボタン - XLS、PDF、印刷プレビューおよび他の形態へのエクスポートテーブル

ここに画像を挿入説明
画像表ボタン方法ステップ得る
:1、インポートボタンが5であり、JSファイルを必要
①メインJSファイルを削除することはできません。dataTables.buttons.min.js
②buttons.colVis.min.js
③buttons.flash.minを。 JS
④buttons.html5.min.js
⑤buttons.print.min.js
2、予約テーブルボタン容器内のテーブルの先頭、図に示すように:
ここに画像を挿入説明
3、名前によってテーブルのdataTable VAR定義テーブルをレンダリングするとき、その後JSメソッド定義VARを使用図に示すように、結合フォーム名:
ここに画像を挿入説明
4、メソッド呼び出しボタンJS(JS MYTABLE方法は、プロジェクトのタイプ削除ボタンニーズbuttonan、フォームVAR名の前のステップで定義されています)

    //打印预览、导出Excel文件的js方法————————开始
    
	$.fn.dataTable.Buttons.defaults.dom.container.className = 'dt-buttons btn-overlap btn-group btn-overlap';

	new $.fn.dataTable.Buttons( myTable, {
		buttons: [
		  {
			"extend": "colvis",
			"text": "<i class='fa fa-search bigger-110 blue'></i> <span class='hidden'>Show/hide columns</span>",
			"className": "btn btn-white btn-primary btn-bold",
			columns: ':not(:first):not(:last)'
		  },
		  {
			"extend": "copy",
			"text": "<i class='fa fa-copy bigger-110 pink'></i> <span class='hidden'>Copy to clipboard</span>",
			"className": "btn btn-white btn-primary btn-bold"
		  },
		  {
			"extend": "csv",
			"text": "<i class='fa fa-database bigger-110 orange'></i> <span class='hidden'>Export to CSV</span>",
			"className": "btn btn-white btn-primary btn-bold"
		  },
		  {
			"extend": "excel",
			"text": "<i class='fa fa-file-excel-o bigger-110 green'></i> <span class='hidden'>Export to Excel</span>",
			"className": "btn btn-white btn-primary btn-bold"
		  },
		  {
			"extend": "pdf",
			"text": "<i class='fa fa-file-pdf-o bigger-110 red'></i> <span class='hidden'>Export to PDF</span>",
			"className": "btn btn-white btn-primary btn-bold"
		  },
		  {
			"extend": "print",
			"text": "<i class='fa fa-print bigger-110 grey'></i> <span class='hidden'>Print</span>",
			"className": "btn btn-white btn-primary btn-bold",
			autoPrint: false,
			message: 'This print was produced using the Print button for DataTables'
		  }		  
		]
	} );
	myTable.buttons().container().appendTo( $('.tableTools-container') );
	//style the message box
	var defaultCopyAction = myTable.button(1).action();
	myTable.button(1).action(function (e, dt, button, config) {
		defaultCopyAction(e, dt, button, config);
		$('.dt-button-info').addClass('gritter-item-wrapper gritter-info gritter-center white');
	});
	
	
	var defaultColvisAction = myTable.button(0).action();
	myTable.button(0).action(function (e, dt, button, config) {
		
		defaultColvisAction(e, dt, button, config);
		
		
		if($('.dt-button-collection > .dropdown-menu').length == 0) {
			$('.dt-button-collection')
			.wrapInner('<ul class="dropdown-menu dropdown-light dropdown-caret dropdown-caret" />')
			.find('a').attr('href', '#').wrap("<li />")
		}
		$('.dt-button-collection').appendTo('.tableTools-container .dt-buttons')
	});
	
	////
	
	setTimeout(function() {
		$($('.tableTools-container')).find('a.dt-button').each(function() {
			var div = $(this).find(' > div').first();
			if(div.length == 1) div.tooltip({container: 'body', title: div.parent().text()});
			else $(this).tooltip({container: 'body', title: $(this).text()});
		});
	}, 500); 
	//打印预览、导出Excel文件的js方法————————结束

ページのタイトルタグ内のテーブル名で定義されている5、Excelスプレッドシートにエクスポート
ここに画像を挿入説明

おすすめ

転載: blog.csdn.net/sjn0815/article/details/91874458