JSFiddle - React, Tailwind, and code Playground

by NAGA SAI AYTHA

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>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
<select id="filter">
  <option value="0">foo</option>
  <option value="1">foo2</option>
</select>

JavaScript

function ContactHelper() {
  this.init();
  this.contactsTable = null;
}

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

  $('#filter').on('change', function() {
    let newData = {
      'first_name': 'foo'
    };
    
    console.log(this.contactsTable);
    this.contactsTable.row.add(newData);
  }).bind(this);

  this.initContactsTable();
};

ContactHelper.prototype.initContactsTable = function() {
  this.contactsTable = $('#my-dataTable').DataTable({
    columns: [{
        data: 'first_name'
      }
    ],
    destroy: true,
  });

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

$(document).ready(function() {
  let cHelper = new ContactHelper();
});