$(document).ready(function() {

      let columnDef = [

          {

            data: '__historybutton',

            _className: 'nosearchbox dt-control',

            orderable: false,

            searchable: false,

            defaultContent: '',

          },

          {

            data: '__editbutton',

            _className: 'nosearchbox',

            orderable: false,

            searchable: false,

            render: function (data, type, row, meta) {

              let ret = '<div><a class="editbutton fa fa-pencil-square-o btn btn-primary" href="#"></a></div>';

              return ret;

            },

          },

            { "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" },

      ];

      var table = $('#example');

      var thead = $('<thead>').appendTo(table);

      var tr = $('<tr>').appendTo(thead);

      $(columnDef).each(function (i) {

        var th = $('<th>',{'html':columnDef[i]._title}).appendTo(tr);

        if ( columnDef[i].hasOwnProperty('_className') ) {

          $(th).addClass( columnDef[i]._className );

        }

      });

      $(tr).clone().appendTo(thead);

​

//       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,

      rowCallback: function(row, data, displayNum, displayIndex, dataIndex) {

        let dataTable = $('#example').DataTable();

        dataTable.row(row).invalidate();

​

        if (displayNum > 0) {

          let prev_data = dataTable.rows( { page: 'current' } ).data()[displayNum-1].position;

          let cur_data = dataTable.rows( { page: 'current' } ).data()[displayNum].position;

​

          if (prev_data == cur_data) {

            let items = row.querySelectorAll(':defined');

            items.forEach((i) => {

              let column_name = dataTable.column(i).dataSrc();

              //console.log(dataTable.column(i).className());

              if (column_name && column_name == 'position') {

                //console.log(column_name);

                //console.log(i.innerHTML);

                i.innerHTML = "";

                i.classList.remove("dt-control");

              }

            });

          }

        }

      },

      dom: 'Bfrtip',

      buttons: [

           {

               extend: 'colvis'

           },

      ],

      columns: columnDef,

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

        //select: {

        //  style: 'api',

        //  info: false,

        //},

        //deferLoading: 0,

        //autoWidth: true,

        scrollX: true,

        scrollY: '50vh',

        //scrollCollapse: true,

        //processing: true,

      initComplete: function () {

​

        $( this.api().table().container()  ).on( 'keyup', "thead input.column_search",function () {

          table

            .column( $(this).closest('th') )

            .search( this.value )

            .draw();

        });

       }

​

    });

} );