DataTables

DataTables Examples

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link href="https://cdn.datatables.net/v/dt/dt-2.0.8/b-3.0.2/b-html5-3.0.2/datatables.min.css" rel="stylesheet">
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-2.0.8/b-3.0.2/b-html5-3.0.2/datatables.min.js"></script>


<table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example">
    
                                <thead>
                  <tr>
                    <th style="width: 200px;"></th>
                    <th colspan="2" style="text-align: center; background-color: #f8f8f8; border-right: 1px solid #cecfd1;" > TITLE1</th>
                    <th colspan="2" style="text-align: center; background-color: #f8f8f8;"> TITLE2</th>
                   
                  </tr>
                  <tr>
                    <th style="width: 200px;">ITEM</th>
                    <th style="width: 150px; background-color: #e8e8e8; border-right: 1px solid #cecfd1;"><span class="badgesct1">SUBT1</span></th>
                    <th style="width: 150px; background-color: #e8e8e8; border-right: 1px solid #cecfd1;"><span class="badgesct2">SUBT2</span></th>
                    <th style="width: 150px; background-color: #c2c2c2; border-right: 1px solid #cecfd1;"><span class="badgesct1">SUBT3</span></th>
                    <th style="width: 150px; background-color: #c2c2c2; border-right: 1px solid #cecfd1;"><span class="badgesct2">SUBT4</span></th>
                  
                  </tr>

                  </thead>
                 <tbody>
                   <tr>
                         <td>abcd</td>
                         <td>aaa</td>
                         <td>bbb</td>
                         <td>ccc</td>>
                         <td>ddd</td>
                         </tr>
                ...

JavaScript

$(document).ready(function() {
    $('#example').dataTable({"sPaginationType": "full_numbers"
    
    
    
buttons: [

  { 
        text: '<a class="btn btn-default btn-sm bthome add_vuoto"><i class="far fa-plus-square"></i> NUOVO</a>',  action: function ( e, dt, button, config ) {}
      }, 

      { extend: 'pdf', title: 'title', text: '<a class="btn btn-default btn-sm bthome"><i class="fas fa-file-pdf"></i> PDF</a>', orientation: 'landscape',  

        
        exportOptions: {  columns: [ 0, 1, 2, 3, 4 ]       },
        customize: function (doc) {
                           doc.defaultStyle.fontSize = 8;
                           doc.styles.tableHeader.fontSize = 10;
                           doc.content[1].table.widths = [ '20%', '20%',  '20%',  '20%',  '20%'];
                           doc.styles.tableBodyEven.alignment = 'center';
        doc.styles.tableBodyEven.noWrap = true;
        doc.styles.tableBodyOdd.alignment = 'center';
        doc.styles.tableBodyOdd.noWrap = true;
        doc.styles.tableBodyOdd.fillColor = '#f3f3f3';
                           
                       },

                    },

  { extend: 'print', text: '<a class="btn btn-default btn-sm bthome"><i class="fas fa-print"></i> STAMPA</a>',  exportOptions: {  columns: [ 0, 1, 2,3,4 ]       }, },         
],
    
    });
    
    
});