reactjsreact-hooksdatatablesreact-data-table-component

How to always run/refresh datatables?


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>

Solution

  • 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!