$(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" },

            { "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);

​

      $('#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" />' );

      } );

    let storage_html = {};

    let storage_classes = {};

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

      colReorder: true,

      orderCellsTop: true,

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

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

        //dataTable.row(row).invalidate('data');

        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);

                if (!(dataIndex in storage_html) || !(column_name in storage_html[dataIndex])) {

                  storage_html[dataIndex] ||= {};

                  storage_html[dataIndex][column_name] = i.innerHTML;

​

                }

                i.innerHTML = "";

​

                if (i.classList.contains("dt-control")) {

                  if (!(dataIndex in storage_classes) || !(column_name in storage_classes[dataIndex])) {

                    storage_classes[dataIndex] ||= {};

                    storage_classes[dataIndex][column_name] = "dt-control";

                  }

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

                }

              }

            });

          } else {

            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') {

                //i.innerHTML = data[column_name];

                if (dataIndex in storage_html) {

                  //console.log(storage_html[dataIndex]);

                  i.innerHTML = storage_html[dataIndex][column_name];

                }

                if (dataIndex in storage_classes) {

                  i.classList.add(storage_classes[dataIndex][column_name]);

                }          

              }

            });

          }

        } else {

          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') {

              //i.innerHTML = data[column_name];

              if (dataIndex in storage_html) {

                //console.log(storage_html[dataIndex]);

                i.innerHTML = storage_html[dataIndex][column_name];

              }

              if (dataIndex in storage_classes) {

                i.classList.add(storage_classes[dataIndex][column_name]);

              }          

            }

          });

        }

      },

        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();

          });

        }

​

      });

  } );