When I do some action in my react application like, update or delete, the data tables cannot run, the data tables only run when refreshing the page How can I get it to refresh automatically?
//Datatable Modules
import "datatables.net-dt/js/dataTables.dataTables"
import "datatables.net-dt/css/jquery.dataTables.min.css"
import $ from 'jquery';
import { useEffect } from "react";
//initialize datatable
$(document).ready(function () {
setTimeout(function(){
$('#example').DataTable();
} ,100);
});
useEffect(() => {
init();
},[])
const init = () => {
employeeService.getAll()
.then(response => {
setEmployees(response.data);
})
.catch(error => {
console.log('Something wrong', error);
})
}
the return container
<table id="example" className="table table-bordered table-striped">
...
</table>
The thing that you're looking for needs the usage of live data updates, You can use the native WebSockets API, or use a simpler api like Socket.IO to make a connection between the Client and the Server (Emit | Receive) and update the table data... Good luck learning WebSockets!