JSFiddle - React, Tailwind, and code Playground

by Dmitri Ganenco

HTML

<script src="https://demos.creative-tim.com/material-dashboard-pro/assets/js/core/jquery.min.js"></script>
<script src="https://demos.creative-tim.com/material-dashboard-pro/assets/js/plugins/jquery.dataTables.min.js"></script>
<table id="my-dataTable" class="table table-striped table-no-bordered table-hover" cellspacing="0" width="100%" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Surname</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
<select id="userType">
  <option value="0">foo</option>
  <option value="1">foo2</option>
</select>

JavaScript

function UsersHelper() {
  this.init();
  this.usersTable = null;
}

UsersHelper.prototype.init = function() {
  console.log('initialized');

  $('#userType').on('change', function() {
    let newData = {
      'first_name': 'foo',
      'surname': 'fooooooo'
    };
    console.log(newData);
    debugger;
    this.usersTable.row.add(newData).draw();
  }.bind(this));

  this.initUserTable();
};

UsersHelper.prototype.initUserTable = function() {
  this.usersTable = $('#my-dataTable').DataTable({
    columns: [{
        data: 'first_name'
      },
      {
        data: 'surname'
      }
    ],
    destroy: true,
  });

  $('#userType').trigger('change');
};

$(document).ready(function() {
  let userHelper = new UsersHelper();
});