관리자에 에이스 표 버튼을 사용 - 내보내기 테이블을 XLS, PDF, 인쇄 미리보기 및 다른 형태의

사진 표 버튼 방법 단계 달성
: 1, 가져 오기 단추가 다섯이 있고, JS 파일을 요구
① 주요 JS 파일을 삭제할 수 없습니다 : dataTables.buttons.min.js
②buttons.colVis.min.js
③buttons.flash.min합니다. JS의
④buttons.html5.min.js
⑤buttons.print.min.js
2에 도시 된 바와 같이, 예약 표 버튼 용기 내의 테이블의 선두 :

이름 테이블 데이터 테이블 VAR 정의 표를 렌더링 할 때 (3)는 다음 JS 방법 정의 VAR을 사용 도에 도시 된 바와 같이 폼 이름 바인딩 :

4, 메소드 호출 버튼 JS (JS myTable에있어서, 상기 폼 VAR 이름 이전 단계에서 정의 buttonan되는 프로젝트 유형 삭제 버튼 요구)

    //打印预览、导出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 스프레드 시트 수출