JSFiddle - React, Tailwind, and code Playground

by maysamsh

HTML

<script src="https://s3.amazonaws.com/dynatable-docs-assets/js/jquery.dynatable.js"></script>
<link rel="stylesheet" href="https://s3.amazonaws.com/dynatable-docs-assets/css/jquery.dynatable.css">
It should show jsondata when user clicks 'btn one' and show jsondata2 when 'btn two' is clicked. 
<br/>
<table id="my-final-table">
  <thead>
    <th>Band</th>
    <th>Song</th>
      <th class="my-class">id</th>
  </thead>
  <tbody>
  </tbody>
</table>
<input type="button" id="btn1" value="btn one">
    <input type="button" id="btn2" value="btn two">

JavaScript

var jsondata=[
  {
    "band": "Weezer",
    "song": "El Scorcho",
      "id":1
  },
  {
    "band": "Chevelle",
    "song": "Family System",
      "id":2
  }
];
var jsondata2=[
  {
    "band": "fooo1",
    "song": "odyssey",
      "id":3
  },
  {
    "band": "foo2",
    "song": "brave heart",
      "id":3
  }
];
var processingComplete = function(){
    $('#my-final-table tr').on("click",function(){
        console.log($(this));
});
};


// call the first time manually
processingComplete();

$("#btn1").on("click",function(){
$('#my-final-table').dynatable({
  dataset: {
    records: jsondata
  }
}).bind('dynatable:afterProcess', processingComplete);
});

$("#btn2").on("click",function(){
$('#my-final-table').dynatable({
  dataset: {
    records: jsondata2
  }
}).bind('dynatable:afterProcess', processingComplete);
});