Datatables Error

by lucas_oliveira

HTML

<!DOCTYPE html>
<html>
  <head>
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.4/css/dataTables.bootstrap4.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.bootstrap4.min.css" type="text/css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.2.1/css/fixedHeader.dataTables.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.dataTables.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="example" class="table table-sm table-hover table-striped display dt-responsive" width="100%">
        <thead>
          <tr>
            <th colspan="2"></th>
            <th colspan="4">Some header info</th>
            <th colspan="4">Some header info</th>
          </tr>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>Another Field</th>
            <th>Another Field</th>
            <th>Another Field</th>
            <th>Another Field</th>
          </tr>
        </thead>

        <tfoot>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>Another Field</th>
           ...

CSS

body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}

JavaScript

$(document).ready( function () {
    var positions = "<'row'<'col-sm-12 col-md-7'B><'col-sm-12 col-md-5'f>>" +
        "<'row'<'col-sm-12'tr>>" +
        "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>";

    var names = [
        'Column 1',
        'Column 2',
        'SHI 1 - Column 1',
        'SHI 1 - Column 2',
        'SHI 1 - Column 3',
        'SHI 1 - Column 4',
        'SHI 2 - Column 1',
        'SHI 2 - Column 2',
        'SHI 2 - Column 3',
        'SHI 2 - Column 4',
    ];

    var buttonCommon = {
        exportOptions: {
            columns: ':visible',
            format: {
                body: function (data, row, column, node) {
                    //thats because my table has inputs
                    try{
                        if($(data).is("input")){
                            return $(data).val();
                        }
                    }catch(e){}
                    return data;
                },
                header: function(data, colindex, trDOM, node){
                    return names[colindex];
                }
            }
        }
    };

    var options = {
    "dom": positions,
    "paging":   false,
    "ordering": true,
    "info":     false,
    "columnDefs": [
        {"orderable": false, "targets": 'no-sort'},
    ],
    "searching": true,
    "responsive": {
        breakpoints: [
            { name: 'desktop-xl',  width: Infinity },
            { name: 'desktop-lg',  width: 2559 },
            { name: 'desktop',  width: 1439 },
            { name: 'tablet-l', width: 1023 },
            { name: 'tablet-p', width: 767 },
            { name: 'mobile-l', width: 479 },
            { name: 'mobile-p', width: 319 }
        ]
    },
    "order": [[ 1, "asc" ]],
    "buttons": [
        $.extend(true, {}, buttonCommon, {
            extend: 'print',
            text: '<i class="fas fa-print"></i>',
            title: 'Some title',
            titleAttr: 'Clique aqui para imprimir toda a tabela.',
         ...