$(document).ready(function() {

    // Setup - add a text input to each footer cell

    // DataTable

    var table = $('#example').DataTable({

      colReorder: true,

      orderCellsTop: true,

      dom: 'Bfrtip',

      buttons: [

           {

               extend: 'colvis'

           }

      ],

      columns: [

            { "data": "name", title: "Name" },

            { "data": "position", title: "Position" },

            { "data": "office", title: "Office" },

            { "data": "salary", title: "Salary" },

      ],

      ajax: "/examples/ajax/data/objects.txt",

        initComplete: function() {

          let i = 1;

          let row = document.createElement('tr');

          row.role = 'row';

          row.classList.add('searchInput');

          this.api()

            .columns()

            .every(function () {

              let column = this;

              let col = document.createElement('td');

              let div = document.createElement('div');

              let input = document.createElement('input');

              input.style.width = '100%';

              input.oninput = function() {

                column.search(this.value, $('#is_regex').is(':checked'));

                $('#example').DataTable().draw();

              };

              input.value = i;

              i += 1;

              col.append(div);

              div.append(input);

              row.append(col);

              //$('#example thead').append(row);

              column.header().parentNode.parentNode.appendChild(row);

​

​

            });

        },

        //select: {

        //  style: 'api',

        //  info: false,

        //},

        //deferLoading: 0,

        //autoWidth: true,

        scrollX: true,

        scrollY: '50vh',

        //scrollCollapse: true,

        //processing: true,

    });

} );