2017-11-14 12 views
0

PDF 내보내기를 가로로 변경하려고하지만 PDF 내보내기 버튼 만 포함됩니다. CSV 및 PDF 버튼이 모두있는 동안 내 CSV 버튼을 어디에 배치할지 궁금합니다.DataTables CSV 내보내기 버튼을 사용하여 PDF를 가로로 내보내기

현재 코드 :

$('#sales').DataTable({ 
       dom: 'Bfrtip', 
       buttons: [ 
        'csvHtml5', 'pdfHtml5' 
       ], 
       "order": [[ 1, "desc" ]] 
      }); 

내가 이것을 적용 할 : 여기

$('#example').DataTable({ 
     dom: 'Bfrtip', 
     buttons: [ 
      { 
       extend: 'pdfHtml5', 
       orientation: 'landscape', 
       pageSize: 'LEGAL' 
      } 
     ] 
    }); 
+1

try [this] (https://stackoverflow.com/questions/41805342/datatable-issue-in-pdf-page-size-and-orientation) – hungrykoala

답변

1

작업 솔루션에서 조각 (텍스트는 독일어, 중 하나를 삭제하거나 언어로 번역). 그것은 4 개의 버튼을 추가합니다 : enter image description here

dom: 'Blfrtip', 
     buttons: [ 
      { 
       extend: 'colvis', 
       titleAttr: 'Sichtbare Spalten auswählen (gilt auch für Export)', 
       text: '<i class="fa fa-filter" aria-hidden="true"></i>' 
      }, 
      { 
       extend: 'csv', 
       titleAttr: 'Tabelle als CSV exportieren', 
       text: '<i class="fa fa-file-text-o" aria-hidden="true"></i>' 
      }, 
      { 
       extend: 'copyHtml5', 
       titleAttr: 'Tabelle in Zwischenspeicher kopieren', 
       text: '<i class="fa fa-clipboard" aria-hidden="true"></i>', 
       exportOptions: { 
        columns: ':visible' 
       } 
      }, 
      { 
       extend: 'excelHtml5', 
       title: 'Filialübersicht', 
       titleAttr: 'Tabelle als Exceltabelle exportieren', 
       text: '<i class="fa fa-file-excel-o" aria-hidden="true"></i>', 
       exportOptions: { 
        columns: ':visible' 
       } 
      }, 
      { 
       extend: 'pdfHtml5', 
       orientation: 'landscape', 
       title: 'Filialübersicht', 
       titleAttr: 'Tabelle als PDF exportieren', 
       text: '<i class="fa fa-file-pdf-o" aria-hidden="true"></i>', 
       exportOptions: { 
        columns: ':visible' 
       } 
      }, 
      { 
       extend: 'help', 
       titleAttr: 'Hilfe anzeigen', 
       text: '<i class="fa fa-question-circle" style="color:#FF480D;" aria-hidden="true"></i>', 
      } 

마지막 버튼 (도움말) 사용자 정의 하나입니다, 도움 텍스트 모달 창을 엽니 다.