實(shí)現(xiàn)圖片中表格按鈕的方法步驟
1、導(dǎo)入按鈕所需的js文件，主要有五個(gè)：
①主要js文件不可刪除：dataTables.buttons.min.js
②buttons.colVis.min.js
③buttons.flash.min.js
④buttons.html5.min.js
⑤buttons.print.min.js
2、在table表頭上預(yù)留按鈕容器，如圖：

3、dataTable渲染表格時(shí)通過var定義表格名稱，便用js方法通過var定義的表格名稱進(jìn)行綁定，如圖所示：

4、調(diào)用按鈕的js方法(js方法中的myTable就是上一步驟中var定義的表格名稱，buttonan按鈕類型可根據(jù)項(xiàng)目需求刪減)

//打印預(yù)覽、導(dǎo)出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 boxvar 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); //打印預(yù)覽、導(dǎo)出Excel文件的js方法————————結(jié)束

5、Excel導(dǎo)出的表格名稱通過表格頁面中的title標(biāo)簽所定義的

總結(jié)

以上是生活随笔為你收集整理的Ace Admin中表格按钮的使用方法——表格导出为xls、pdf，表格打印预览等的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。