JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<table id="myTable">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody id="data">
</tbody>
</table>
<select id="dropdownlist">
<option></option>
<option>1</option>
</select>
JavaScript
$(document).ready(function(){
var oTable = $('#myTable').dataTable({
"aoColumns": [
{ "bSortable": false },
null, null, null, null
]
});
});
$("#dropdownlist").on("change", function () {
$("#data").empty();
$.ajax({
type: "POST",
url: "#",
dataType: "json",
success: function (data) {
$.each(data, function (key, item) {
$("#data").append("<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>");
});
}
})
$('#myTable').dataTable().fnDestroy();
$('#myTable').dataTable({ // Cannot initialize it again error
"aoColumns": [
{ "bSortable": false },
null, null, null, null
]
});
});