$(document).ready(function() {

      let columnDef = [

            { "data": "name", _title: "Name", _className: "nosearchbox" },

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

            { "data": "office", _title: "Office", visible: false },

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

            { "data": "start_date", _title: "Start Date" },

      ];

      let thead = $('<thead>');

      let tr1 = $('<tr>');

      let tr2 = $('<tr>');

      for (let c of columnDef) {

        if ('visible' in c && c.visible === false) {

          continue;

        }

​

        let th1 = $('<th>');

        if (c._className) {

          th1.addClass(c._className);

        }

        th1.html(c._title || '');

​

        let th2 = $('<th>');

        if (c._className) {

          th2.addClass(c._className);

        }

        th2.html(c._title || '');

​

        tr1.append(th1);

        tr2.append(th2);

      }

​

      thead.append(tr1);

      thead.append(tr2);

​

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

      //console.log(thead);

​

      $('#example thead tr:eq(1) th').each( function () {

        let title = $(this).text();

        let classList = $(this).prop('classList');

        if (classList.contains('nosearchbox') || classList.contains('white-bg')) {

          $(this).html('');

          return;

        }

        $(this).html( '<input type="text" placeholder="Search '+title+'" class="column_search" />' );

      } );

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

      colReorder: true,

      orderCellsTop: true,

      dom: 'Bfrtip',

      buttons: [

           {

               extend: 'colvis'

           }

      ],

      columns: columnDef,

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

        //select: {

        //  style: 'api',

        //  info: false,

        //},

        //deferLoading: 0,

        //autoWidth: true,

        scrollX: true,

        scrollY: '50vh',

        //scrollCollapse: true,

        //processing: true,

    });

} );