JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
</tr>
</tfoot>
<tbody id="data"> <!--data will be inputed here-->
</tbody>
</table>
</div>
JavaScript
$(document).ready(function() {
makeDataTable();
setInterval(updateDataTable, 5000);
function updateDataTable(){
$('#dataTable').DataTable().ajax.reload(function(json){
console.log('dataTableReloaded');
console.log(json);
},false);
}
function makeDataTable(){
$('#dataTable').DataTable( {
ajax: {
method: "post",
url: '/echo/json/',
data: {
json: `{"data":[{
"id": "1",
"name": "legenjerry",
"email": "[email protected]"
},
{
"id": "2",
"name": "legen",
"email": "[email protected]"
},
{
"id": "3",
"name": "jerry",
"email": "[email protected]"
},
{
"id": "4",
"name": "legjerry",
"email": "[email protected]"
},
{
"id": "5",
"name": "gen",
"email": "[email protected]"
},
{
"id": "6",
"name": "rry",
"email": "[email protected]"
},
{
"id": "7",
"name": "legenjerry",
"email": "[email protected]"
},
{
"id": "8",
"name": "legen",
"email": "[email protected]"
},
{
"id": "9",
"name": "jerry",
"email":...