DataTables

DataTables Examples

HTML

<!DOCTYPE html>
<html>
  <head>
    <link href="https://cdn.datatables.net/v/dt/jq-3.7.0/jszip-3.10.1/dt-2.0.8/b-3.0.2/b-html5-3.0.2/b-print-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/jq-3.7.0/jszip-3.10.1/dt-2.0.8/b-3.0.2/b-html5-3.0.2/b-print-3.0.2/datatables.js"></script>
  

    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <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>
   </tbody>
</table>
    </div>
  </body>
</html>

JavaScript

$(document).ready(function () {
  $("#example").DataTable({
    sPaginationType: "full_numbers",
    layout: {
      topStart: "buttons",
    },
    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] },
      },
    ],
  });
});